knockout.js - 在小部件中绑定“foreach”并异步调用数据

我刚开始使用 Durandal、Knockout 和 TypeScript

我在小部件中使用“foreach”绑定进行模板化时遇到问题。非常感谢任何帮助。

我需要为产品创建一个分页小部件。为此，我创建了一个可观察数组 totalPagesHolder，并将我的页面数量作为值推入其中（例如，如果我们有 3 页，则该数组将包含 [1,2,3]）

我处理承诺，并异步获取我所有产品数组的长度。

widgets/pagination/viewmodel.ts

class viewmodel {
    ...
    public totalPagesHolder: KnockoutObservableArray<number> =     ko.observableArray<number>([]);
    ...
    activate(){
         this.totalFetch().done( (total) => {
            let pages = Math.floor(this.total() / this.pageSize);
            pages += this.total() % this.pageSize > 0 ? 1 : 0;
            for (let i = 1; i < pages +1 ; i++) {
                this.totalPagesHolder.push(i);
            }

            console.log("totalPagesHolder", this.totalPagesHolder());

    });
}

wigdets/分页/查看.html

<ul class="pager"> 
          <li><button>Next</button></li>
          <!-- ko with: totalPagesHolder -->
          <li><button data-bind="text: $index() + 1, click: gotoPage">...   </button></li>
         <!-- /ko -->
         <li><button class="btn btn-default">  Previous  </button></li>
    </ul>  

我的视图.html

 <div class=”page”>
        <div data-bind="widget: {kind:'pagination'}"></div>
    </div>

如果我不使用小部件，那么 knockout 会渲染所有按钮

my-viewmodel.ts

class MyModel {
    public totalPagesHolder = ko.observable([1,2,3,4]);
}
export = MyModel;

我的视图.html

<ul class="pager"> 
      <li><button>Next</button></li>
      <!-- ko with: totalPagesHolder -->
      <li><button data-bind="text: $index() + 1, click: $parent.gotoPage">...   </button></li>
     <!-- /ko -->
     <li><button class="btn btn-default">  Previous  </button></li>
</ul>  

答案＃1

看起来你可能需要设置你的小部件，使其在激活时接受一个变量，以确定显示按钮的数量。

即使没有页面按钮，你在页面源代码中看到小工具正在渲染的证据，还是根本看不到？