1

現在、ASP.Net アプリケーションにビュー モデルを設定してデータ バインディングを処理しています。このモデルは、複数のページで共有されているメイン ビューの Razor テンプレートとやり取りします。現在のビュー モデルにデータ バインディングを持つ Razor テンプレートに選択ボックスがありますが、同じ機能を得るには、このコードを複数のビュー モデルに複製する必要があり、ビュー モデルのこの部分だけを私のテンプレートと同じように抽象化されているのは、それが存在するビューの一部の抽象化です。理想的には、次のようなもの(疑似コード)が必要です:

class ViewModel1{
       function doSomeAjaxStuff(option from select){

       }

      function doSomethingOnSelectorChange(option from select){
           call doSomeAjaxStuff(option from select);

      }
}

class SelectorViewModel{
       function getSelectorValuesFromAjax(){
          //this function will populate the selectors values from an ajax call
       }

       function sendMessageThatSelectorHasChanged(){
           //this will send to the first viewmodel that the selector value has changed

       }
}

私はMVVMアーキテクチャに少し慣れていないので、ノックアウトでこれを行う方法が正確にはわかりません。誰かが私を助けることができますか？

4

1 に答える 1

3

これがあなたの求めているものかどうかはわかりませんが、ノックアウトを使用して再利用可能なコントロールのようなものを実装しようとしているようです。私たちが現在採用しているアプローチの 1 つは、テンプレート スクリプトと組み合わせてカスタム バインディング ハンドラーを使用することです。たとえば、いくつかのテンプレートがあるとします。

<script type="text/html" id="selector-template">
    <!-- ko if: isLoading -->
    Loading data...
    <!-- /ko -->
    <!-- ko ifnot: isLoading -->
    <ul data-bind="foreach: items">
        <li data-bind="
            css: { selected: $parent.selectedItem == $data }, 
            template: $parent.itemTemplate, 
            click: selectItem">
        </li>
    </ul>
    <!-- /ko -->
</script>

...そしてバインディングハンドラ:

ko.bindingHandlers.selector = {
    init: function(element, valuesAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var bindingValues = valuesAccessor();

        var templateElem = document.createElement('div');
        templateElem.setAttribute('data-bind', 'template: "selector-template"');
        element.appendChild(templateElem);

        var viewModelForControl = new SelectorViewModel(bindingValues);
        var childBindingContext = bindingContext.createChildContext(viewModelForControl);
        ko.applyBindingsToDescendants(childBindingContext, element);
        return { controlsDescendantBindings: true };
    }
};

...次のようにカスタム コントロールをインスタンス化できます。

<div data-bind="selector: { 
    itemsUrl: urlForItems, 
    selected: doSomethingOnSelectorChange,
    itemTemplate: 'product-list-item-template'
}"></div>

<script type="text/html" id="product-list-item-template">
    <img data-bind="attr: { src: imageUrl }" />
    <span data-bind="text: description"></span>
</script>
于 2013-06-11T21:10:57.060 に答える