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

How do I enumerate the properties of a javascript object using data-bind Knockout.js

本文关键字：属性 数据绑定 js Knockout 对象 一个 何枚举 枚举 javascript      更新时间：2023-09-26

我有下一个模型:

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的循环行为，当它被用于一个对象，但失败了:

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

恐怕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)">

自定义绑定:

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

使用computed observable来获取你想要的结构并绑定到它。我擅自修改了你的JS并制作了self。

给你。

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

相关文章：