javascript - 如何使用 knockout.js 单击时将数据从一个元素填充到另一个元素

Question

我想用被单击元素的数据填充弹出窗口。例如，我有一个用户列表，其中包含姓名、职位等。然后，当我单击“查看更多”时，会显示一个弹出窗口，其中包含列表项中的相同用户数据。 目前弹出窗口中没有写入任何内容。

请参阅此处的示例:http://jsfiddle.net/46LJ9/

JS/KO

//should be a json from server
var users = [
  {
    "name": "Yoshi",
    "surname": "Kawasaki",
    "position": "Developer"
  },
  {
    "name": "Miu",
    "surname": "Furinji",
    "position": "Martial Artist"
  },
  {
    "name": "Shigure",
    "surname": "Kosaka",
    "position": "Martial Artist Master"
  },
  {
    "name": "Ore",
    "surname": "Ore Ga",
    "position": "Martial Artist and Developer"
  }
  ];

  (function($, ko, window) {

    var UserModel = {

    name: ko.observable(''),
    surname: ko.observable(''),
    position: ko.observable(''),

    users: ko.observableArray(users),

    userDetails: ko.observable({}),

    showOverlay: function(o) {

        UserModel.userDetails(o);

        $('.overlay, .overlay-bg').fadeIn(400, function() {
            $(this).removeClass('hide').addClass('show');
        });
    },

    closeOverlay: function(o, e) {
        $('.overlay, .overlay-bg').fadeOut(400, function() {

            var $this = $(this);

            $this
                .removeClass('show')
                .addClass('hide')
                .removeAttr('style');
        });
    }

  };

  ko.applyBindings(UserModel);

}(jQuery, ko, window));

Answer 1

在你的 JS 中，你正在更新 UserModel.userDetails(o); 但你的 html 绑定(bind)到 name 等。

<h1><span class="name" data-bind="text: name"></span></h1>

将绑定(bind)更改为data-bind="text: userDetails().name"，它将起作用。

要么这样，要么更新您的名字、姓氏和职位可观察值。

参见:http://jsfiddle.net/46LJ9/1/

编辑

显然使用 with 绑定(bind)比上面的更有意义:

<div class="overlay hide" data-bind="with: userDetails">

在这里看到:http://jsfiddle.net/46LJ9/3/