1

テンプレートバインディングに基づいてカスタムバインディングを作成しようとしています。アイデアは、独自のビューモデルクラスを持つテンプレートを持つことですが、そのクラスのインスタンスを親ビューモデルに追加したくありません（少なくともコードではありません。実行時にインスタンスを追加しても問題ありません）。

ここで達成しようとしていることを理解するには、例を示します。高度なスライダーを作成したい、スライダーのhtmlをテンプレートに入れたくない、スライダーは独自のクラスである必要があるが、スライダーのビューモデルインスタンスを追加したくない親ビューモデルに。これが私のコードです。最初は機能し、最初はテンプレートをレンダリングしているように見えますが、例外がスローされ、理由がわかりません。ここで作業コードを表示

html：

  <script type="text/html" id="my-template">  
    <div data-bind="text: internalValue"></div>
  </script>

  <div data-bind="templateWithModel: {name: 'my-template', dataPropName: 'price', modelConstructor: Slider}">
  </div>

js：

ko.bindingHandlers.templateWithModel = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
        var options = ko.utils.unwrapObservable(valueAccessor());
        var modelName = options.name + "_" + options.dataPropName;
        viewModel[modelName] = new options.modelConstructor(viewModel[options.dataPropName]);

        ko.bindingHandlers.template.init(element, valueAccessor);
    },
    'update': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        var modelName = options.name + "_" + options.dataPropName;
        options.data = viewModel[modelName];

        ko.bindingHandlers.template.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
    }
}


var Slider = function(obsVal){
  var self = this;

  self.internalValue = ko.observable(obsVal());
}     

var vm = {price: ko.observable(5)};

ko.applyBindings(vm);
4

2 に答える 2

1

init関数では、の値を返すかko.bindingHandlers.template.init、を返し{ controlsDescendantBindings: true }ます。

これは、バインディングが子要素へのバインディングの適用を処理することをKnockoutに通知します。それ以外の場合、Knockoutは子要素に対して全体的なビューモデルとのバインディングを適用し続けます。これによりinternalValue、トップレベルのビューモデルのプロパティではないため、例外が発生します。

ドキュメントのこの部分：http：//knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.htmlおよびこのブログ投稿はcontrolsDescendantBindingsさらに説明するのに役立ちます：http ：//www.knockmeout.net/2012/05/quick -tip-skip-binding.html

于 2013-01-01T17:28:10.173 に答える
0

ビューモデルをテンプレートに対してバインドするためのフレームワークを作成しました。ここを見てください、

https://github.com/AndersMalmgren/Knockout.BindingConventions/wiki/Template-convention

これは慣例に従って機能するため、名前の付いたモデルのメンバーがいる場合は、MyViewModelMyViewという名前のテンプレートが検索されます。

<div data-name="myMember"></div>

http://jsfiddle.net/xJL7u/

于 2013-01-02T09:47:12.377 に答える