首页>Program>source

KnockoutJS是否具有一项功能,而我可以采取类似的措施:

   var myArray = ko.observableArray([
      { name: "Jimmy", type: "Friend" },
      { name: "George", type: "Friend" },
      { name: "Zippy", type: "Enemy" }
    ]);

然后在"类型"字段中选择"不重复",从而产生如下所示的结果:

(pseudo code)
    var distinct = myArray.distinct('type')
      // Returns array of two arrays
      //  distinct[0] is an array of type=Friend
      //  distinct[1] is an array of type=Enemy

我知道ko.utils.arrayGetDistinctValues,但这并不能完全满足我的要求.我也知道我可以使用ko.utils.arrayGetDistinctValues编写一些循环来获取我想要的东西,我只是想知道是否有其他东西被我忽略的KnockoutJS烘焙了。

最新回答
  • 11天前
    1 #

    KO没有其他内置功能可简化此操作。

    您可以通过多种方式进行这项工作.例如,您可以将observableArrays扩展为具有 distinct 功能.然后,您可以像这样创建observableArray:

    this.people = ko.observableArray([
           new Person("Jimmy", "Friend"),
           new Person("George", "Friend"),
           new Person("Zippy", "Enemy")
    ]).distinct('type');
    

    distinct 函数可能看起来像:

    ko.observableArray.fn.distinct = function(prop) {
        var target = this;
        target.index = {};
        target.index[prop] = ko.observable({});    
        ko.computed(function() {
            //rebuild index
            var propIndex = {};
            ko.utils.arrayForEach(target(), function(item) {
                var key = ko.utils.unwrapObservable(item[prop]);
                if (key) {
                    propIndex[key] = propIndex[key] || [];
                    propIndex[key].push(item);            
                }
            });   
            target.index[prop](propIndex);
        });
        return target;
    };   
    

    它支持链接,因此您可以致电 distinct 多次使用不同的属性。

    此处提供示例:http://jsfiddle.net/rniemeyer/mXVtN/

    这确实会在每次更改时重建索引一次,因此,如果您有大量的项目列表,那么您可能希望探索其他方法(手动订阅)以从"索引"数组中添加/删除项目。

    simplified

    我在jsfiddle中简化了RP Niemeyer的版本,以在不使用独特功能的情况下进行相同的操作.请参考这里:jsfiddle

    <ul data-bind="foreach: choices">
    <li>
        <h2 data-bind="text: $data"></h2>
        <ul data-bind="foreach: $root.people">
            <!-- ko if: $parent === type() -->
            <li data-bind="text: name"></li>
            <!-- /ko -->
        </ul>
        <hr/>
    </li>
    
    var Person = function(name, type) {
       this.name = ko.observable(name);
       this.type = ko.observable(type);    
    }
    var ViewModel = function() {
        var self = this; 
        this.choices = ["Friend", "Enemy", "Other" ];
        this.people = ko.observableArray([
               new Person("Jimmy", "Friend"),
               new Person("George", "Friend"),
               new Person("Zippy", "Enemy")
        ]);
        this.addPerson = function() {
            self.people.push(new Person("new", "Other"));
        };
        this.removePerson = function(person) {
          self.people.remove(person);  
        };
    };
    
    ko.applyBindings(new ViewModel());
    

    感谢尼迈耶.

  • 11天前
    2 #

    只需添加此内容,如果您将此名称称为 .distinct() 方法两次(例如,可能来自计算的可观察对象),您将获得两次调用的索引和相关的计算函数-冲洗并重复,您的手就会遇到性能问题。

    要解决此问题,请在函数顶部附近添加以下行:

    if (target.index && target.index[prop]) return target; //Group by already set up, bail out.
    

  • git:使用pull时快进,合并分支时no-ff
  • c#:如何测试素数?