如何使用data bind Knockout.js枚举javascript对象的属性

我有下一个型号：

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

我希望能够枚举此模型的

属性

属性，并以如下方式显示键和值：

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

属性11
属性22
属性33

我试图基于javascript中的for循环行为解决这个问题，但失败了：

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

自定义绑定：

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

ko.bindingHandlers.createSpan=
{
init:function（元素、valueAccessor、allBindingsAccessor、viewModel、bindingContext）
{
for（valueAccessor（）中的var项）
{
$（元素）。追加（“”）；
});
}
};

恐怕foreach只是为数组创建的，所以您需要函数将对象转换为数组

并将其用于绑定：

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

使用计算出的可观察对象来获得所需的结构并绑定到该结构。我已经擅自修改了你的JS，并将self.attributes设置为可观察的

这是小提琴

下面是它的HTML绑定

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

=

希望这就是你想要的

干杯！

---

Suj

可能是重复的，我想我最近回答了类似的问题！：如果它可以更模块化，这将是完美的…就像foreach绑定，但对象除外。我将尝试看看foreach绑定是如何工作的，并将其转换为objForeach:）谢谢！简单和优雅，但我更喜欢定制装订的想法。谢谢

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

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