3

これは、これを達成するための最良の方法 (または任意の方法!) を明確にするための質問です。これは、私の .net コーディング経験をこの新しい方法に適用しようとしている方法かもしれませんが、多くのコーダーにとってこれが現実世界の問題ではないとは信じられません。

そう。ユーザーの選択/アクションに応じて特定のセクションが変化するため、マスタービュー/ビューモデルはページ上の多くのサブビューを使用します。これらのサブ ビューは、マスター ページに構成されます。

<div data-bind="compose: { model: articleSection, preserveContext: true }"></div>

...そしてサブビュー内で、マスタービューを制御するルートオブザーバブルを次のように参照できます。

<a href="#" class="btn" data-bind="css: { 'btn btn-default': true, 'btn-primary': $root.inEditMode() }, click: $root.setEditMode, enable: $root.articleSelected()">Edit</a>

ただし、サブ ビューの 1 つ自体には、カスタム バインディングと構築用のテンプレートを使用するサブ サブ ビューがあり、それはツリー ビューであり、レイアウトを再帰的に構築できる必要があります。

サブビューのコードは次のとおりです。

<div id="fancytree" data-bind="groupTree: treeGroups">
    <!--<ul data-bind="template: { name: 'itemTmpl', foreach: treeGroups }, groupTree: {}"></ul>/-->
</div>

テンプレートは次のとおりです。

    <script id="itemTmpl" type="text/html">
      <!-- Template used in labtool for tree-->
        <li>
            <span>
                <span data-bind="text: name" />
            </span>
            <ul data-bind="template: { name: 'itemTmpl', foreach: children }"></ul>
        </li>
    </script>

カスタム バインディングは次のとおりです。

ko.bindingHandlers.groupTree = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var tm = valueAccessor();
        var tmUnwrapped = tm();
        $(element).fancytree({
            minExpandLevel: 1,
            source: tmUnwrapped,
            lazyload: function (e, data) {
                data.result = datacontext.getGroupChildren('1111');
            },
            activate: function (event, data) {
                var node = data.node;
                var tg = rootVm.selectedGroupId();
                alert(node.title);
            },
        })
    }

したがって、私の問題は、「selectedArticle」と呼ばれるトップレベルのルートビューモデルで観察可能な.net日から「グローバル変数」と考えるものを取得できないことです。ユーザーがツリービューノードをクリックすると、「アクティブ化」機能が起動され、アラートが正しい詳細とともにポップアップします。その値をルートビューモデルのオブザーバブルに入れることができるようにしたいだけです。カスタム バインディング ハンドラーのバインディング コンテキストからレベルアップします。

これは他の人がすることですよね？私は顔が青くなるまでグーグルで検索しましたが、必要なヒットを得るために必要なキーワードや概念が明らかに欠けています. カスタム バインディングの "activate" 関数の疑似コードでは、単に "root.selectedArticle = node.title" のようなものを入力できるようにしたいのですが、明らかにその方法ではルートを使用できないため、ここで行き詰まります。

4

2 に答える 2

14

バインディング コンテキスト (関数 の5 番目のパラメーター)からアクセスできます。init/update

init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) 
 {  
    bindingContext.$data          // current data
    bindingContext.$parent        // parent binding  
    bindingContext.$parents[0]    // same to bindingContext.$parent  
    bindingContext.$parents[1]    // parent of parent  
    bindingContext.$parentContext // same with bindingContext but from parent
    bindingContext.$root          // you root View Model  
 // ...  
 }
于 2013-09-12T09:32:21.863 に答える