如何将数据从一个元素填充到另一个点击knockout.js

我想填充弹出的元素被点击的数据。例如，我有一个用户名单，位置等列表。然后，当我点击'查看更多'时，弹出窗口显示与列表项目中相同的用户数据。目前没有任何东西被写入弹出窗口中。如何将数据从一个元素填充到另一个点击knockout.js

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));

来源

2014-01-08 Shaoz

它会更容易看如果你创建一个jsfiddle来展示问题 – Tanner

我正在考虑用jsfiddle来做。但在过去，我曾经在jsfiddle中做过这件事，并得到很多投诉......我会尽快更新这个问题。请在@Tanner大约5分钟后回来。许多感谢 – Shaoz

它现在在jsfiddle中：http://jsfiddle.net/46LJ9/ – Shaoz

在你的JS，你要更新UserModel.userDetails(o);但你的HTML绑定到name等

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

变化绑定到data-bind="text: userDetails().name"，它会工作。

要么，要么更新你的名字，姓氏和位置observables。

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

编辑

显然使用与结合，使比上面更多的意义：

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

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

来源

2014-01-08 15:00:41 RobH

谢谢@RobH。当我用'userDetails（）。name，等等'你的第一个技巧时，它的工作原理，但与你的第二个技术使用'with：它会抛出一个错误，说'ReferenceError：surname没有定义'在萤火虫..为什么？顺便说一下，我正在使用基因敲除3.0。 – Shaoz

我不确定，它适用于我的IE10，Firefox和Chrome ... – RobH

如何将数据从一个元素填充到另一个点击knockout.js

回答

相关问题