淘汰“与”绑定删除子元素？答案

【问题标题】：Knockout "with" binding removing child elements?淘汰“与”绑定删除子元素？
【发布时间】：2013-11-28 10:12:11
【问题描述】：

关于淘汰赛的另一个问题...

我创建了以下 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。

【问题讨论】：

标签： jquery html knockout.js

【解决方案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/

希望对你有帮助

【讨论】：

这看起来可以与search-result 部分一起使用，但这如何帮助我将单击的项目绑定到我的另一个对话框？
我的一些其他代码似乎干扰了敲除对可观察对象变化做出反应的能力。

【解决方案2】：

你可以使用

if

和

ifnot

在两个 html 脚本之间切换的绑定...... !!!......这就是我作为模板的替代品所做的事情

【讨论】：

为什么要添加另一个答案而不是编辑以前的答案？
这是另一种敲除绑定的方式，而不是使用模板