Question

另一个涉及淘汰赛的问题......

我有以下创建（简化）的ViewModel：

var SearchViewModel = function () {
    var self = this;

    //Properties
    self.resultData = ko.observableArray();
    self.selectedItem = ko.observable();

    //Methods
    self.SearchByName = function (name) {
        var url = "services/User/SearchByName/" + escape(name),
        callback = function (data) { $.each(data, function (i, e) { self.resultData.push(ko.mapping.fromJS(e)); }); self.selectedItem = self.resultData()[0]; };

    $.getJSON(url, callback);
    };

    self.UpdateSelection = function (item) {
        self.selectedItem = item;
    };
};

使用此模型，我使用以下代码将其绑定到UI：

var vm = new SearchViewModel();

vm.SearchByName("Doe");

ko.applyBindings(vm);

结果适用于以下内容：

<div class="search-results" data-bind="foreach: resultData">
    <div class="search-result" data-bind="click: $parent.UpdateSelection">
        <input type="hidden" data-bind="value: Id"/>
        <div>
            <h4 data-bind="text: Name"></h4>
        </div>

        <div class="row-fluid">
            <div class="span6">
                <label class="font-italic">Username: </label>
                <span data-bind="text: Username"></span></div>
            <div class="span6">
                <label class="font-italic">Created: </label>
                <span data-bind="text: Created"></span>
            </div>
        </div>
    </div>
</div>

所有这一切都很好，但是当点击其中一个结果时，我想要一个新的jQuery UI对话框打开，允许用户编辑一些字段。我尝试使用以下内容来完成此任务：

<div id="edit-user-form" title="Edit User" data-bind="with: selectedItem">
    <div class="row-fluid">
        <div class="span5">
            <label>Last Name:</label>
            <input type="text" data-bind="value: LastName" />
        </div>
        <div class="span4">
            <label>First Name:</label>
            <input type="text" data-bind="value: FirstName" />
        </div>
        <div class="span3">
        <label>Middle Name:</label>
        <input type="text" data-bind="value: MiddleName" />
    </div>
</div>

但是当我查看表单时，edit-user-form的所有html子项都被删除了。我读到问题可能是由jQuery UI对话框以及它如何移动元素引起的，但是没有打开对话框并检查html，它仍然被消隐。

为什么会这样？我认为这可能是因为with绑定，但我认为这是它的目的。

使用Knockout v2.3.0。

Answer 1

使用模板绑定而不是使用选定的项目

模板绑定的例子在这里

查看模型：

viewModel.selectedArticle = ko.observable();
viewModel.templateToUse = function(item) {
return item === this.selectedArticle() ? ‘edit’ : this.selectedView();
}.bind(viewModel);

HTML：

<div data-bind="template: { name: templateToUse, foreach: articles }"></div>

链接：http://jsfiddle.net/rniemeyer/Ujr4z/

希望这可以帮到你

Answer 2

你可以使用

if

和

ifnot

绑定以在两个html脚本之间切换...... !!! ...那是我作为模板的替代方案所做的

淘汰“带”绑定删除子元素？

2 个答案: