如何使用数据绑定Knockout.js

我的下一个模型枚举javascript对象的属性：如何使用数据绑定Knockout.js

var simpleModel = function(){ 
    var self = this; 
    self.name = "Simple model"; 
    self.attributes = { 
     attr1: ko.observable("1"), 
     attr2: ko.observable("2"), 
     attr3: ko.observable("3") 
    }; 
}

我想能够列举这一模式，显示的attributes财产键，这样的价值：

<div> 
    <span>attr1</span><span>1</span> 
    <span>attr2</span><span>2</span> 
    <span>attr3</span><spam>3</span> 
</div>

我试图此基础上从JavaScript for循环的行为，当它是一个对象所使用来解决，但没有成功

<div data-bind="foreach: { data: designAttributes, as: 'dAttr' }"> 
    <span data-bind="text: $index"></span> 
    <span data-bind="text: dAttr[$index]"></span> 
</div>

来源

2013-03-07 VladN

可能的重复[动态添加'td'和绑定使用knockout.js]（http://stackoverflow.com/questions/15209958/dynamically-add-td-and-bindings-using-knockout-js） – nemesv 2013-03-07 19:36:47

是的，我以为我最近回答了类似的问题！：D – 2013-03-07 19:41:48

我怕的foreach为数组创建只有这样，你需要的功能，以您的对象转换为数组。 jsFiddle

window.objToArray = function (obj) { 
    var result = []; 
    for (var i in obj) { 
     result.push({ key: i, value: obj[i]}); 
    } 
    return result; 
};

，并利用它们的结合：

<ul data-bind="foreach: window.objToArray(items)">

来源

2013-03-07 19:22:25

简单而优雅，但我更喜欢自定义绑定的想法。谢谢！ – VladN 2013-03-07 20:08:27

自定义绑定：

<div data-bind="createSpan"> 

ko.bindingHandlers.createSpan = 
{ 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) 
    { 
     for(var item in valueAccessor()) 
     { 
      $(element).append('<span data-bind="text:' + valueAccessor()[item] + '"></span>'); 
     }); 
    } 
};

来源

2013-03-07 19:22:17

如果它可以更模块化，就像完美的绑定，但是对象一样，这是完美的。我将尝试看看这个foreach绑定是如何工作的并将其转换为objForeach :)谢谢！ – VladN 2013-03-07 20:07:09

使用计算观察到的得到你想要的结构并绑定到。我冒昧地修改你的JS并使self.attributes成为一个可观察对象。

这是它的小提琴。

http://jsfiddle.net/sujesharukil/A846H/

var simpleModel = function(){ 
var name = 'Simple model', 
    attributes = ko.observable({ 
     attr1: ko.observable('1'), 
     attr2: ko.observable('2'), 
     attr3: ko.observable('3') 
    }), 
    splitAttributes = ko.computed(function(){ 
     var splitAttribs = []; 
     for(var attr in attributes()){ 
      splitAttribs.push({ 
       name: attr, 
       val: attributes()[attr] 
      }); 
     } 

     return splitAttribs; 
    }), 
    vm = function(){}; 

    vm.name = name; 
    vm.attributes = splitAttributes; 

    return vm; 


} 

ko.applyBindings(new simpleModel());

这里是HTML它具有约束力。

<div data-bind="foreach: attributes"> 
    <span data-bind="text: name"></span> = <span data-bind="text: val"></span> <br/> 
</div>

希望这就是你要找的。

干杯！ Suj

来源

2013-03-07 20:24:57

如何使用数据绑定Knockout.js

回答

相关问题