标签: computed-observable

我是KnockoutJS的新手,很想知道这是否可行.我试图将本地存储对象包装在可写的计算中,以便我可以利用KnockoutJS的自动绑定优势.但是,"读取"操作不会引用任何可观察对象 - 因此初始值永远不会更新:

<select data-bind="foreach: logLevelsArray, value: currentLogLevel">
    <option data-bind="attr: { value: $index() }, text: $data"></option>
</select>

_.extend(DevUtilitiesViewModel.prototype, {
    ...
    logLevelsArray: ['error', 'warning', 'info', 'debug'],
    currentLogLevel: ko.computed({
        read: function() {
            return localStorage.getItem("logger-level");
        },
        write: function( newValue ) {
            localStorage.setItem("logger-level", newValue);
        }
    })
    ...
});

DevUtilitiesViewModel.currentLogLevel(); // 2 (default)
DevUtilitiesViewModel.currentLogLevel(4);
localStorage.getItem("logger-level"); // 4 - write was successful
DevUtilitiesViewModel.currentLogLevel(); // 2 - still the original value

我知道这是预期的行为,我理解为什么.我也明白我可以创建currentLogLevel一个简单的observable并订阅它并以这种方式更新本地存储.但是我必须跟踪订阅并手动处理它,编写更多代码,等等.我只是想看看是否有办法做我想做的事情:为本地存储提供一个可观察的getter/setter.

我目前正在努力将我从Knockout编写的一些代码移植到Angular2.我真的很喜欢knockout中计算的observables的构造,这意味着只有当obeservable依赖于变化时才计算该函数的结果.

我知道我可以在角度中使用一个函数,它只会在结果发生变化时更新视图(即使它会多次计算结果),但我的计算机正在进行排序,这就是为什么我只想要完成工作当输入实际改变时.

我发现下面的链接解释了如何使用angularjs,但我不知道如何将其转换为angular2(typescript)

http://www.jomendez.com/2015/02/06/knockoutjs-computed-equivalent-angularjs/ KO.Angular/Breeze Initializer中的计算等效项

我有一个使用映射插件的Knockout Viewmodel.映射JSON对象后,我创建了一些计算值,如下所示:

/* viewmodel setup and mapping */

myViewModel
    .formattedGiftAmount = ko.computed({
        read: function () {
            return parseInt(this.giftAmount(), 10).formatMoney();                        
        }
        , write: function (value) {                        
            this.giftAmount(value.unformatMoney());
        }
        , owner: this        
    })
    .formattedGoal = ko.computed({
        read: function () {
            return parseInt(this.goalAmount(), 10).formatMoney();                        
        }
        , write: function (value) {                        
            this.goalAmount(value.unformatMoney());
        }
        , owner: this        
});

不要太担心代码的作用,我更关心模式.正如你所看到的,这两个属性formattedGiftAmount(),并formattedGoal()具有定义它们几乎相同的对象.唯一的区别是他们修改了哪些属性.我可能会有更多像这样的实例,所以我想知道是否有任何方法可以使它更可重用.我可以想象做类似的事情this[prop](),但我无法弄清楚如何将其注入对象并使其工作.

PS:我已经看过这个,但它仍然不能完全满足我的需求.

我正在使用一个可观察的"部件"数组,其中包含一个可观察到的"Vol".我目前有每个部分的音量以及显示的总量.应用程序启动时,正确添加总金额.但是,当我更改零件的体积时,总量不会重新计算.

HTML:

<ul>
    <li data-bind="foreach:  Parts">
        <input data-bind="value: Vol" />
<br/>
    </li>
</ul>

<br/>
<br/>
<span data-bind="text: fullVol "></span>

使用Javascript:

    function Part (data) {

       var self = this;
        self.Vol= ko.observable(data.Vol);

    }


    function AppViewModel() {
       var self = this;


        self.Parts = ko.observableArray([new Part({"Vol": 1}), new Part({"Vol":2}), new Part({"Vol":3})]);
        self.fullVol = ko.computed(function() {
            var total = 0;
           $.each(self.Parts(), function() { total += (this.Vol() ) })
            return total;
        });
    }


ko.applyBindings(new AppViewModel());

这是我的JsFiddle:http://jsfiddle.net/jwinstonaspen/Zmkew/6/

情况:

• kendo DataSource

  var ordersDataSource = new kendo.data.DataSource({
      type: "odata",
      transport: {
          read: {
              url: "http://localhost/odata.svc/Orders?$expand=OrderDetails"
          }
      },
      schema: {
          type: "json",
          data: function(response){
              return response.value;
          }
          total: function(response){
              return response['odata.count'];
          }
      },
      serverPaging: true,
      serverFiltering: true,
      serverSorting: true
  })
  

  Run Code Online (Sandbox Code Playgroud)

• 从odata源读取的json数据如下:

  {
      odata.metadata: "xxxx",
      odata.count: "5",
      value: [
          {
              OrderId: 1,
              OrderedDate: "2013-02-20",
              OrderInfoA: "Info A",
              OrderInfoB: "Info B"
              OrderDetails: [
                  {
                      OrderDetailId: 6,
                      OrderDetailInfoC: "Info C",
                      OrderDetailInfoD: "Info D"
                  },
                  {
                      //Another OrderDetail's data
                  }
              ]
          },
          {
              // …

  Run Code Online (Sandbox Code Playgroud)

我的任务是动态地为链接形成"href",每次更改附加的observable.这是一个例子的链接: JS Fiddle示例链接

实现这个目的时我遇到了两个问题:

• 当我尝试传递一些字符串+计算的observable时,我得到计算函数列表,而不是它的值.

  <a data-bind="attr: {href : '#someHash/' + getHref(10)}">Link</a>
  

  Run Code Online (Sandbox Code Playgroud)

  链接看起来像:

  http://fiddle.jshell.net/3DAfQ/1/show/#someHash/function h(){if(0<arguments.length)return"function"===typeof v?v.apply(d,arguments):j(Error("Cannot write a value to a ko.computed unless you specify a 'write' option. If you wish to read the current value, don't pass any parameters.")),this;n||g();b.r.Wa(h);return l}
  

  Run Code Online (Sandbox Code Playgroud)

  我发现哪个甚至不合适.

• 第二,当我尝试更改一个observable时,计算依赖于,链接不会改变.

  <a href="#" data-bind="click: changeStoreHref(20)">change Link</a>
  
  self.changeStoreHref = function(num)
  {
      self.storeHref(num);
  };
  

  Run Code Online (Sandbox Code Playgroud)

这是HTML代码:

<a data-bind="attr: {href : '#someHash/' + getHref(10)}">Link</a>
<a href="#" data-bind="click: changeStoreHref(20)">change Link</a>

和knockoutjs:

function viewModel()
{
    var self = this;
    self.storeHref = ko.observable('ten');

    self.getHref = …

目前我尝试重新评估我的"启用"属性,但在我更改页面或pageIndex后它没有重新计算.

page.js

export class Test {
    pageIndex = 0;
    pages = 2;

    constructor() {
        this.items = [
            {title:"Prev.", enabled:this.prevAvailable},
            {title:"Next", enabled:this.nextAvailable}
        ];
    }

    get prevAvailable() {
        return this.pageIndex > 0;
    }

    get nextAvailable}() {
        return this.pageIndex < this.pages;
    }
}

page.html中

<template>
    <ul>
        <li repeat.for="item of items">
            <button if.bind="item.enabled">
                ${item.title}
            </button>
        </li>
    </ul>
</template>

如何为标准分页控件实现此行为的正常方法是什么？如果在最后一页,我尝试禁用"下一步"按钮.

我感谢任何帮助.

您好，有一种在实例化ko.computed时不触发该功能的方法

例子是

我有这个ko.computing

ko.computed(function(){ alert(this.Test); } , this);

所以基本上，如果我实例化此计算，这将触发定义的函数，有没有办法在实例化时不触发它？并且仅在依赖项更改时才触发它？