Question

我是Durandal，Knockout和TypeScript的初学者

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

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

我使用promises并以异步方式获取所有产品的数组长度。

窗口小部件/分页/ 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 /分页/ view.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>

我-view.html

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

如果我不使用小部件，那么knockout将呈现所有按钮

我-viewmodel.ts

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

我-view.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>

Answer 1

看起来你可能需要设置你的小部件，这样它在激活时需要一个变量来确定要显示的按钮数量。

您是否在页面源中看到即使没有页面按钮也无法呈现窗口小部件的证据，或者根本没有？

通过异步调用数据绑定窗口小部件中的“foreach”

1 个答案: