Question

多视图模型绑定应用程序应用here一个jsfiddle应用程序。

    ko.bindingHandlers.stopBinding = {
        init: function() {
             return { controlsDescendantBindings: true };
        }        
    };

    var shellModel = {
        selectedSection: ko.observable(),
    };

主视图与子视图分开。当您点击＆＃34;个人资料＆＃34; 按钮时，个人资料子视图模型将作为 selectedview 激活。我想在子模型中放置一个关闭按钮，当我单击它时，主selectedview对象将为null。

Answer 1

解决这个问题的两种方法

耦合Shell和子视图

对每个子视图添加一个close函数以回调shellModel

var profileModel = {
    first: ko.observable("Bob"),
    last: ko.observable("Smith"),
    onClose: function() {
        shellModel.selectedSection(null);
    }
};

然后为每个子视图div添加一些关闭按钮

<button data-bind="click: onClose">Close</button>

使用消息传递解析

使用子/ pub消息库（如Amplify或PubSubJS）。我在下面使用了放大。

使用sub / pub方法可以创建publishMsg绑定

// Very simplistic handler.
ko.bindingHandlers.publishMsg = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext ) {
        var msgToPublish = valueAccessor();
        ko.bindingHandlers["click"].init(element, function() {
            return function() {
                amplify.publish(msgToPublish);
            }
        }, allBindings, viewModel, bindingContext);
    }        
};

为每个子视图div添加一个按钮，或在父div中添加1

<button data-bind="publishMsg: 'subview-close'">Close</button>

添加订阅以清除selectedSection。

// Callback for subscription
amplify.subscribe('subview-close', function() {
    shellModel.selectedSection(null);
}

您还可以添加onClose函数（如在耦合解决方案中），但只需调用publish ...

var profileModel = {
    ...
    onClose: function() {
        amplify.publish('subview-close');
    }
};

但这会污染对象模型恕我直言（但完成工作）

knockout js多视图模型绑定

1 个答案: