javascript - knockout.js - 模式的延迟数据绑定？

Question

我正在使用 knockout.js 来显示员工列表。我在页面上有一个隐藏的模式标记。当单击单个员工的“详细信息”按钮时，我想将该员工数据绑定到模式弹出窗口。我正在使用 ko.applyBindings(employee, element) 但问题是当页面加载时，它期望模态开始时绑定到某些东西。

所以我想知道，是否有技巧/策略来进行延迟/延迟数据绑定？我查看了虚拟绑定，但文档没有足够的帮助。

谢谢！

score 37 · Accepted Answer

我想提出一种在 MVVVM 中使用模态的不同方法。在 MVVM 中，ViewModel 是 View 的数据，View 负责 UI。如果我们检查这个提议：

this.detailedEmployee = ko.observable({}),

var self = this;
this.showDetails = function(employee){
    self.detailedEmployee(employee);
    $("#dialog").dialog("show"); //or however your dialog works
}

我非常同意this.detailedEmployee = ko.observable({})，但我非常不同意这条线：$("#dialog").dialog("show");。这段代码放在 ViewModel 中并显示模态窗口，实际上它是 View 的责任，所以我们搞砸了 MVVM 方法。我会说这段代码将解决您当前的任务，但将来可能会导致很多问题。

关闭弹出窗口时，您应该设置detailedEmployee让undefined您的主 ViewModel 处于一致状态。
关闭弹出窗口时，当您想在应用程序中使用另一个模式的组件时，您可能希望进行验证并放弃关闭操作

对我来说，这些点非常关键，所以我想提出一个不同的方法。如果我们“忘记”您需要在弹出窗口中显示数据，绑定with可以解决您的问题。

this.detailedEmployee = ko.observable(undefined);
var self = this;
this.showDetails = function(employee){
    self.detailedEmployee(employee);
}

<div data-bind="with: detailedEmployee">
Data to show
</div>

如您所见，您的 ViewModel 对应如何显示数据一无所知。它只知道应该显示的数据。with绑定仅在定义时才会显示内容detailedEmployee。接下来，我们应该找到一个类似于with但会在弹出窗口中显示内容的绑定。让我们给它起名字modal。它的代码是这样的：

ko.bindingHandlers['modal'] = {
    init: function(element) {
        $(element).modal('init');
        return ko.bindingHandlers['with'].init.apply(this, arguments);
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var returnValue = ko.bindingHandlers['with'].update.apply(this, arguments);

        if (value) {
            $(element).modal('show');
        } else {
            $(element).modal('hide');
        }

        return returnValue;
    }
};

如您所见，它在with内部使用插件，并根据传递给绑定的值显示或隐藏弹出窗口。如果已定义 - '显示'。如果不是 - '隐藏'。它的用法如下：

<div data-bind="modal: detailedEmployee">
    Data to show
</div>

您唯一需要做的就是使用您最喜欢的模态插件。我准备了一个带有 Twitter Bootstrap 弹出组件的示例：http: //jsfiddle.net/euvNr/embedded/result/

在这个例子中，自定义绑定更强大一些；您可以订阅 onBeforeClose 事件并在需要时取消此事件。希望这可以帮助。

score 3 · Accepted Answer

@Romanych 提供的答案中链接的 JSFiddle 似乎不再起作用。

因此，我使用 Bootstrap 3 和Bootstrap 模态库构建了我自己的示例（基于他原来的 fiddle），它具有完整的 CRUD 支持和基本验证： https ://jsfiddle.net/BitWiseGuy/4u5egybp/

自定义绑定处理程序

ko.bindingHandlers['modal'] = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var allBindings = allBindingsAccessor();
    var $element = $(element);
    $element.addClass('hide modal');

    if (allBindings.modalOptions && allBindings.modalOptions.beforeClose) {
      $element.on('hide', function() {
        var value = ko.utils.unwrapObservable(valueAccessor());
        return allBindings.modalOptions.beforeClose(value);
      });
    }
  },
  update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    if (value) {
      $(element).removeClass('hide').modal('show');
    } else {
      $(element).modal('hide');
    }
  }
};

示例用法

风景

<div data-bind="modal: UserBeingEdited" class="fade" role="dialog" tabindex="-1">
  <form data-bind="submit: $root.SaveUser">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">×</a>
      <h3>User Details</h3>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label for="NameInput">Name</label>
        <input type="text" class="form-control" id="NameInput" placeholder="User's name"
           data-bind="value: UserBeingEdited() && UserBeingEdited().Name, valueUpdate: 'afterkeydown'">
      </div>
      <div class="form-group">
        <label for="AgeInput">Age</label>
        <input type="text" class="form-control" id="AgeInput" placeholder="User's age"
           data-bind="value: UserBeingEdited() && UserBeingEdited().Age, valueUpdate: 'afterkeydown'">
      </div>
      <!-- ko if: ValidationErrors() && ValidationErrors().length > 0 -->
      <div class="alert alert-danger" style="margin: 20px 0 0">
        Please correct the following errors:
        <ul data-bind="foreach: { data: ValidationErrors, as: 'errorMessage'     }">
          <li data-bind="text: errorMessage"></li>
        </ul>
      </div>
      <!-- /ko -->
    </div>
    <div class="modal-footer">
      <button type="button" data-dismiss="modal" class="btn btn-default">Cancel</button>
      <button type="submit" class="btn btn-primary">Save Changes</button>
    </div>
  </form>
</div>

视图模型

/* ViewModel for the individual records in our collection. */
var User = function(name, age) {
  var self = this;
  self.Name = ko.observable(ko.utils.unwrapObservable(name));
  self.Age = ko.observable(ko.utils.unwrapObservable(age));
}

/* The page's main ViewModel. */
var ViewModel = function() {
  var self = this;
  self.Users = ko.observableArray();

  self.ValidationErrors = ko.observableArray([]);

  // Logic to ensure that user being edited is in a valid state
  self.ValidateUser = function(user) {
    if (!user) {
      return false;
    }

    var currentUser = ko.utils.unwrapObservable(user);
    var currentName = ko.utils.unwrapObservable(currentUser.Name);
    var currentAge = ko.utils.unwrapObservable(currentUser.Age);

    self.ValidationErrors.removeAll(); // Clear out any previous errors

    if (!currentName)
      self.ValidationErrors.push("The user's name is required.");

    if (!currentAge) {
      self.ValidationErrors.push("Please enter the user's age.");
    } else { // Just some arbitrary checks here...
      if (Number(currentAge) == currentAge && currentAge % 1 === 0) { // is a whole number
        if (currentAge < 2) {
          self.ValidationErrors.push("The user's age must be 2 or greater.");
        } else if (currentAge > 99) {
          self.ValidationErrors.push("The user's age must be 99 or less.");
        }
      } else {
        self.ValidationErrors.push("Please enter a valid whole number for the user's age.");
      }
    }

    return self.ValidationErrors().length <= 0;
  };

  // The instance of the user currently being edited.
  self.UserBeingEdited = ko.observable();

  // Used to keep a reference back to the original user record being edited
  self.OriginalUserInstance = ko.observable();

  self.AddNewUser = function() {
    // Load up a new user instance to be edited
    self.UserBeingEdited(new User());
    self.OriginalUserInstance(undefined);
  };

  self.EditUser = function(user) {
    // Keep a copy of the original instance so we don't modify it's values in the editor
    self.OriginalUserInstance(user);

    // Copy the user data into a new instance for editing
    self.UserBeingEdited(new User(user.Name, user.Age));
  };

  // Save the changes back to the original instance in the collection.
  self.SaveUser = function() {
    var updatedUser = ko.utils.unwrapObservable(self.UserBeingEdited);

    if (!self.ValidateUser(updatedUser)) {
      // Don't allow users to save users that aren't valid
      return false;
    }

    var userName = ko.utils.unwrapObservable(updatedUser.Name);
    var userAge = ko.utils.unwrapObservable(updatedUser.Age);

    if (self.OriginalUserInstance() === undefined) {
      // Adding a new user
      self.Users.push(new User(userName, userAge));
    } else {
      // Updating an existing user
      self.OriginalUserInstance().Name(userName);
      self.OriginalUserInstance().Age(userAge);
    }

    // Clear out any reference to a user being edited
    self.UserBeingEdited(undefined);
    self.OriginalUserInstance(undefined);
  }

  // Remove the selected user from the collection
  self.DeleteUser = function(user) {
    if (!user) {
      return falase;
    }

    var userName = ko.utils.unwrapObservable(ko.utils.unwrapObservable(user).Name);

    // We could use another modal here to display a prettier dialog, but for the
    // sake of simplicity, we're just using the browser's built-in functionality.
    if (confirm('Are you sure that you want to delete ' + userName + '?')) {
      // Find the index of the current user and remove them from the array
      var index = self.Users.indexOf(user);
      if (index > -1) {
        self.Users.splice(index, 1);
      }
    }
  };
}

使用 View 和 ViewModel 初始化 Knockout

var viewModel = new ViewModel();

// Populate the ViewModel with some dummy data
for (var i = 1; i <= 10; i++) {
  var letter = String.fromCharCode(i + 64);
  var userName = 'User ' + letter;
  var userAge = i * 2;
  viewModel.Users.push(new User(userName, userAge));
}

// Let Knockout do its magic!
ko.applyBindings(viewModel);

score 1 · Accepted Answer

我会创建另一个包裹员工的 observable。

this.detailedEmployee = ko.observable({}),

var self = this;
this.showDetails = function(employee){
    self.detailedEmployee(employee);
    $("#dialog").dialog("show"); //or however your dialog works
}

将点击附加到showDetails。然后你可以applyBindings在页面加载时调用。

javascript - knockout.js - 模式的延迟数据绑定？

3 回答 3

自定义绑定处理程序

示例用法

风景

视图模型

使用 View 和 ViewModel 初始化 Knockout

Related

Reference