使用异步数据调用在小部件内绑定“foreach”

Posted 2023-03-27

【中文标题】使用异步数据调用在小部件内绑定“foreach”

【英文标题】：Binding "foreach" inside a widget with asynchronous call for data

【发布时间】：2017-02-14 01:03:26

【问题描述】：

我是 Durandal、Knockout 和 TypeScript 的初学者

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

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

我使用 Promise 并异步获取我所有产品的数组长度。

小部件/分页/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/pagination/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>  

my-view.html

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

如果我不使用小部件，则敲除会呈现所有按钮

my-viewmodel.ts

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

export = MyModel;

my-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>  

【问题讨论】：

似乎小部件会有自己的范围。您可以尝试 with: $parent.totalPagesHolder 或将 `totalPagesHolder 显式传递给小部件，假设小部件采用参数（我不知道 Durandal）。

你的with绑定不应该是foreach吗？另外，gotoPage 是在哪里定义的？不应该以$parent或$root为前缀吗？最后：MyModel.totalPagesHolder 不是observableArray，对吗？

感谢您的回答。我已经尝试了所有组合 - foreach/with、$parent.totalPagesHolder。不幸的是我有同样的结果。我的 gotoPage() 是在 activate() 之外的 widgets/pagination/viewmodel.ts 中定义的，我在 activate() 中调用它。不，MyModel.totalPagesHolder 是可观察数组

我有一个 Chrome 插件 Knockoutjs 上下文调试器，用于检测 Knockout 上下文。所以我可以看到 $data、$parent、$root 等包含的内容。看看那里的截图prntscr.com/cq7aha。所以 totalPagesHolder 在 $parent 或 $root 之外。

【参考方案1】：

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

您是否在页面源代码中看到小部件正在呈现，即使没有页面按钮，或者根本没有？