问题标签 [knockout-components]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
2948 浏览

data-binding - Knockout 3.2 组件数据上下文

我正在使用 Knockout 3.2 和新的组件系统。我正在尝试拥有包含子组件的组件。

Home Page (component - with HomePageViewModel) NewsFeed1 (component with HomePageViewModel.NewsFeedViewModel1) NewsFeed2 (component with HomePageViewModel.NewsFeedViewModel2)

主页视图模型

新闻FeedViewModel

如您所见,HomePageViewModel包含两个NewsFeedViewModel. 我现在希望能够将它们用作我的两个组件的 DataContext/BindingContext 但这似乎不起作用。

主页.html

这两个组件都没有使用 ViewModel,HomePageViewModel而是使用新的NewsFeedViewModel. 如何使这两个组件的数据上下文绑定到存储在顶部组件(主页)中的视图模型?

0 投票
3 回答
3194 浏览

javascript - 具有命名模板的淘汰赛 3.2 组件?

我正在尝试在淘汰赛 3.2.0 中使用新的组件系统。

目前没有太多文档,但这确实有效。

但是,template绑定允许您指定 DOM 中已经存在的模板名称,例如:

然后你可以这样做:

所以我尝试了这个:

但它不起作用。有没有办法将命名模板与新组件一起使用,或者它们必须内联或加载 AMD。

谢谢

编辑:在 RP Niemeyer 的回答之后,为了澄清,这里是我尝试他回答的模板:

这是组件代码:

它确实加载了模板,但将其视为转义字符串。

想法?

0 投票
1 回答
3161 浏览

knockout.js - 组件生命周期

下面是一个创建简单组件的示例。根据http://knockoutjs.com/documentation/component-binding.html#component-lifecycle可以添加一个dispose函数,当组件从 DOM 中删除时,该函数由 ko 调用。我正在寻找类似的东西,可以让我进入第 5 步。组件处于活动状态

评论要求的附加信息

在下面的示例中,我想 a) 插入由ko component和 b) 创建的 DOM 片段,一旦它附加到 DOM,就将其转换<ul>为 kendo PanelBar。这与使用 DurandalcompositionComplete事件的方式非常相似。可能还有其他解决方案,但我很想知道如何/是否可以通过使用淘汰组件来完成。

模板

视图模型

0 投票
1 回答
6092 浏览

knockout.js - 使用 requireJS 加载淘汰组件视图模型的问题

我正在使用淘汰赛 3.2 的新组件功能并尝试使用 requireJS 加载组件。但是,我有一个奇怪的问题。基本上,当我在注册函数中对视图模型进行硬编码时,一切正常。当我尝试使用 requireJS 加载完全相同的视图模型时,它无法正常工作。

这是加载组件的 html 示例:

这是该组件将加载的模板中的 html:

当我编写如下所示的注册函数时,一切都按预期工作(这意味着当它被加载时,在用户单击“添加”链接之前,“测试”文本不会显示):

但是,如果我尝试将其更改为使用 requireJS 来加载视图模型,它就不起作用了。“测试”文本会立即显示,无需用户单击“添加”链接。视图模型上的 observables 不知何故搞砸了。

这是脚本文件的内容(注意视图模型是相同的):

注册函数现在看起来像这样:

在调试问题时,我在 knockout-3.2.0 的 resolveViewModel 函数中添加了检查。在它调用 new viewModelConfig(params) 之后,我检查“Adding”是否是对象上的一个 observable。当视图模型在 register 函数中被硬编码时,它返回 true。当我使用 requireJS 加载视图模型时,它返回 false。

关于我在这里做错了什么的任何想法?

0 投票
1 回答
2505 浏览

knockout.js - 淘汰组件中的功能(knockoutjs 3.2+)

我试图了解淘汰赛 3.2 组件,但我被卡住了。

我有一个组件“客户”

但是在绑定时,我收到以下错误:

无法处理绑定“点击:函数(){return $root.selectCustomer}”消息:无法读取未定义的属性“selectCustomer”

接下来我要做的是selectedCustomerId与另一个组件通信。这是否可能使用 PubSub 同步以及这如何可能。有人可以给我一个提示从哪里开始。

0 投票
2 回答
1228 浏览

knockout.js - 捕获 Knockout 组件的加载事件

在加载 Knockout 组件并将 viewModel 绑定到视图后,有没有办法捕获事件?

我想使用 Knockout 组件制作自定义弹出窗口,并且只有在加载完成后才会打开弹出窗口。

当弹出窗口打开时

0 投票
1 回答
2801 浏览

knockout.js - 在淘汰赛 3.2 中无法使用自定义组件传递变量

我正在尝试在淘汰赛 3.2 中使用自定义组件。如果我使用预定义的参数,一切都很好。例如这个jsFiddle

但是当我从我的视图模型中传递参数时(我已经在这里阅读了如何做)我什么也没得到:jsFiddle。我究竟做错了什么?

这是我的js代码:

0 投票
0 回答
656 浏览

knockout.js - passing object to other viewmodel using pubsub?

I've created 2 knockout components using the new knockout version 3.2 (and requirejs).

the first component contains a html template for showing a table of objects which are contained in an observable array in my viewmodel if the component.

the second component contains a html template for showing a modal for editing the values of a selected item from my first component.

As you can see I've used pubsub for communicating the selected id from de first component. This is used to components that require an id for communicating to the server for getting details of the selected source item. However for editing the selected item all data is already known on the client so an extra ajax request shouldn't be the solution so I want to communicate the complete sourceEntry object.

is this possible using knockout-postbox's pubsub implementation?

The next question is maybe a simple one. The model of component only needs to be loaded when editing. A hidden section doesn't make sense with performance in mind. Is there a way to dynamically inject the component at runtime with knockout or do I need jquery to add the component dynamically. Whats the best practice here?

0 投票
1 回答
520 浏览

javascript - Knockout 3.2 amd 组件不更新可观察对象

我无法使用带有组件和要求的淘汰赛 3.2 来更新可观察数组。我可以在声明时手动将项目推送到视图模型中的数组中,但是当它们通过 ajax 调用或通过硬编码推送按钮单击时,DOM 不会更新。

调试,我可以看到数组中有项目,但是 DOM 没有更新。任何帮助将不胜感激。

默认.html

模板.html

启动.js

模板.js

0 投票
2 回答
6166 浏览

knockout.js - 如何在 ko.applyBindings() 调用后应用组件绑定

有没有办法在 ko.applyBindings() 调用之后应用组件绑定?

关键是,我使用 requireJS 来异步加载我的模块/组件。那么我怎么知道所有的绑定都被注册了呢?

演示 JS 小提琴