根据动态字段可见性更改 Knockout 值绑定

Question

我在这里设置一个简单的例子：http://jsfiddle.net/YzKX9/5/

这就是我想要实现的目标。使用 KnockoutJS，我有一个 标签绑定到使用文本绑定计算的 observable：

Full name: <span data-bind="text: fullName"></span>

加载表单时，值来自一组字段：

First Name: <input type="text" data-bind="value: firstName" /><br />
MI Name: <input type="text" data-bind="value: middleInitial" /><br />
Last Name: <input type="text" data-bind="value: lastName" /> 

但是，我有另一组具有相同绑定定义的隐藏字段，我使用复选框控制它们的可见性。当这些字段可见时，我想让这些字段控制计算的 observable 中的文本，并从初始字段集中删除数据绑定。

我完全不知道该怎么做。我想也许从第一组字段中删除 data-bind 属性会起作用，但它没有。可能有一种更简单的方法来解决这个问题，我愿意接受建议。

Answer 1

这将完美运行：

---

                                                                                 .               
<div id="result">  
  Fullname: <span id="fullName" data-bind="text: fullName"></span>
  <hr />
  <h3>
    Options
  </h3>
  <input type="checkbox" data-bind="checked: chkNameChange" id="chkNameChange" />Name change?
  <hr />
  <div id="sectionOne">
    <h3 id="headerSectionOne">
      Name
    </h3>
    First Name:<input type="text" data-bind="value: firstName" />
    <br />
    MI Name:<input type="text" data-bind="value: middleInitial" />
    <br />
    Last Name:<input type="text" data-bind="value: lastName" />
  </div>
  <hr />
  <div id="sectionTwo" style="display: none;">
    <h3>
      New Name
    </h3>
    First Name:<input type="text" data-bind="value: firstNameNew" />
    <br />
    MI Name:<input type="text" data-bind="value: middleInitialNew" />
    <br />
    Last Name:<input type="text" data-bind="value: lastNameNew" />
  </div>

然后是你的 JavaScript：

function EmployeeViewModel(firstName, lastName, middleInitial, firstNameNew, lastNameNew, middleInitialNew) {
    var self = this;

    self.chkNameChange = ko.observable(false);

    self.firstName = ko.observable(firstName);
    self.lastName = ko.observable(lastName);
    self.middleInitial = ko.observable(middleInitial);

    self.firstNameNew = ko.observable(firstNameNew);
    self.lastNameNew = ko.observable(lastNameNew);
    self.middleInitialNew = ko.observable(middleInitialNew);

    self.fullName = ko.computed(function () {
        if (!self.chkNameChange()){
            return self.lastName() + ", " + self.firstName() + " " + self.middleInitial();
        }
        else{
            return self.lastNameNew() + ", " + self.firstNameNew() + " " + self.middleInitialNew();
        }
    }, self);

}

var evm = new EmployeeViewModel("John", "Doe", "Q", "", "", "");
ko.applyBindings(evm);

$(document).ready(function () {
    $("#chkNameChange").live("click", function (event) {
        if ($("#chkNameChange").is(':checked')) {
            $("#headerSectionOne").text("Former Name");
            $("#sectionTwo").show();
        } else {
            $("#headerSectionOne").text("Name");
            $("#sectionTwo").hide();
        }
    });
});

Answer 2

您尝试做的最简单的方法可能是添加一个 observable 来跟踪您是否正在更改名称。您可以将其绑定到您的复选框，控制第二组字段的可见性，并在您的计算中使用它。代码可能如下所示：

function EmployeeViewModel(firstName, lastName, middleInitial){
    this.firstName = ko.observable(firstName);
    this.lastName = ko.observable(lastName);
    this.middleInitial = ko.observable(middleInitial);

    this.newFirstName = ko.observable(firstName);
    this.newLastName = ko.observable(lastName);
    this.newMiddleInitial = ko.observable(middleInitial);

    this.isNameChange = ko.observable(false);

    this.fullName = ko.computed(function () {
        if (this.isNameChange()) {
            return this.newLastName() + ", " + this.newFirstName() + " " + this.newMiddleInitial();    
        }

        return this.lastName() + ", " + this.firstName() + " " + this.middleInitial();
    }, this);
}

您可以对输入使用checked 绑定，并且不需要使用 jQuery 来处理更改。

小提琴：http://jsfiddle.net/rniemeyer/Jb79U/

Answer 3

您可以根据您的复选框清理 div 元素的绑定。 ko.cleanNode 方法将从 DOM 元素中删除绑定，您可以在干净的 DOM 节点上再次应用绑定。

FIDDLE

function EmployeeViewModel(firstName, lastName, middleInitial){
    var self = this;
    self.firstName = ko.observable(firstName);
    self.lastName = ko.observable(lastName);
    self.middleInitial = ko.observable(middleInitial);

    self.fullName = ko.computed(function () {
        return self.lastName() + ", " + self.firstName() + " " + self.middleInitial();
    }, self);
}

var viewModel = new EmployeeViewModel("John", "Doe", "Q");
ko.applyBindings(viewModel);

$( document ).ready(function() {
     $("#chkNameChange").live("click", function (event) {                
         if ($("#chkNameChange").is(':checked')) {
             $("#headerSectionOne").text("Former Name");
             $("#sectionTwo").show();
             ko.cleanNode($("#sectionOne")[0]);
             if (ko.dataFor($("#sectionTwo")[0])) {
                  ko.applyBindings(viewModel,$("#sectionTwo")[0]);
             }
         }
         else{
            $("#headerSectionOne").text("Name");
             $("#sectionTwo").hide();

             ko.cleanNode($("#sectionTwo")[0]);
             if (ko.dataFor($("#sectionOne")[0])) {
                  ko.applyBindings(viewModel,$("#sectionOne")[0]);
             }
         }
     });
});