knockout.js
コンポーネントの紹介
サーチ…
備考
コンポーネントは、独自のビュー(テンプレート)とviewmodelによって表される再利用可能なコントロール/ウィジェットを許可します。彼らはノックアウト3.2で追加されました。 WebComponentsに触発されたKnockoutは、コンポーネントをカスタム要素として定義することができ、より自明なマークアップを使用できます。
プログレスバー(Boostrap)
コンポーネント定義
ko.components.register('progress-bar', {
viewModel: function(params) {
var that = this;
// progress is a numeric value between 0 and 100
that.progress = params.progress;
that.progressPercentual = ko.computed(function(){
return '' + ko.utils.unwrapObservable(that.progress) + '%';
})
},
template:
'<div class="progress"> <div data-bind="attr:{\'aria-valuenow\':progress}, style:{width:progressPercentual}, text:progressPercentual" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"></div> </div>'
});
HTMLの使用
<progress-bar params="progress:5"></progress-bar>
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow