标签: knockout-components

afterRender使用模板绑定,但在将模板转换为组件后,似乎没有任何使用方法afterRender.我试过寻找一个使用afterRender但无法找到任何东西的组件的例子.

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

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

ko.components.register('price-input', {
  template: '<span>price-input</span>'
})

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

<script type="text/html" id="price_input">
  <span>price-input</span>
</script>

然后你可以这样做:

<div data-bind="template: {name: 'price_input'}"></div>

所以我尝试了这个:

ko.components.register('price-input', {
  template: {name: 'price_input'}
})

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

谢谢

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

<script type="text/html" id="ifx_price_input">
  <h4>PRICE INPUT <span data-bind="text: value"></span></h4>
</script>

这是组件代码:

ko.components.register('price-input', {
  template: {element: 'ifx_price_input'}
})

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

想法？

我有一个我想要转换为的Web应用程序和使用ko组件的SPA.我想知道如何进行一种组件间通信.

例如,我想要一个"通知"组件,其中每个组件都可以发送通知.

我设法通过在主视图模型中共享一个可观察的数组来找到解决方案:

var VM = function() {
    var self = this;

    this._notifications = ko.observableArray([]);
   this.notifications = {
        addInfo: function(text){
            self._notifications.push(text);
        }
    }
}

和

<comp1 params="{app: $data}"></comp1><br/>
<comp2 params="{app: $data}"></comp2><br/>
<notif params="{app: $data}"></notif>

见这里:http: //jsfiddle.net/nveron/j4829y7p/

我对这个解决方案并不完全满意,我宁愿将通知数据保存在通知组件中.

你有什么想法来解决这个问题吗？

我有一个使用3.2.0的嵌套KnockoutJS组件的层次结构.它工作得很好但是我希望在加载和渲染整个组件层次结构后执行一些代码.它与afterRender()完全相同,与afterRender相同的常见用例需要.

到目前为止,我尝试了一些方法,但没有运气:

1. 将以下内容添加到根模板中,但在嵌套组件加载之前调用它,所以太早了. <!--ko template: {afterRender: onLoad.bind($data)} -->
2. 使用最新的3.3.0-alpha并在所有组件上指定synchronous:true.但我相信,因为我使用AMD,组件仍然是异步"加载",这意味着只是因为我的root applyBindings()返回,并不意味着所有组件都已加载和呈现.
3. 甚至尝试构建一个延迟对象集合,只有在加载相应的组件时才能解析它们.这变得过于复杂,但由于我不会进入的原因仍然无法工作.

有没有办法在一个完整的knockoutjs组件层次结构被加载和渲染后调用回调？谢谢!

我刚刚遇到这两个线程,所以似乎其他人也在寻找这个.与现有解决方法的关键区别在于它们不适用于嵌套组件.

• https://github.com/knockout/knockout/issues/1533
• https://github.com/knockout/knockout/issues/1475

我决定通过在以下jsperf中添加组件测试来比较组件的速度与ko 3.2与其他模板引擎的比较:

http://jsperf.com/knockout-template-engines/19

结果让我很困惑,因为我看到组件比常规模板快98%.我觉得我做错了什么,却无法理解.

有些专家可以对此有所了解吗？这种表现是真的还是我看到不正确的基准测试结果？

我想在knockout.js中创建一个自定义组件.

HTML

<demo-widget>TEXT NEEDED</demo-widget>

使用Javascript

ko.components.register('demo-widget', {
    template: '<div>New Text</div>'
});

ko.applyBindings();

该组件加载精细和一切,但我现在想要做的是能够获得原始自定义组件标记内的任何内容(例如"文本需要"文本).

知道我怎么能这样做吗？希望我能够清楚地解释清楚.

这是一个小提琴:http://jsfiddle.net/WhesleyBarnard/f7bmynp5/5/

看看这个场景:

ko.components.register('hello', {
     viewModel: function() { },
     template: "<h1>hello wrold</h1>"
});

如果我使用<hello></hello>生成的html结果将是:

<hello><h1>hello world</h1></hello>

但是如果我想要这个怎么办:

<hello class="hello"><h1>hello world</h1></hello>

那么如何在组件中获得对自定义元素标记的引用？

问题: 我正在尝试构建一个小部件仪表板.每个小部件的标题上都有一个删除按钮.单击此按钮时,相应的小部件必须消失.

我是如何设计的: 我有两个淘汰组件.

1. my-widget-list:VO将有一个observableArray的widget对象.
2. my-widget:VO将在窗口小部件中显示详细信息.

注意:为简单起见,我只用数字替换widget对象.

ko.components.register('my-widget-list', {       
    viewModel : function(params) {
        var self = this;
        self.values = ko.observableArray([10,20,30,40,50]);

        self.deleteWidget = function(obj)
        {
            self.values.remove(obj);
        }
    },
    template: {element: 'my-widget-list-template'}
});

ko.components.register('my-widget', {
    viewModel : function(params) {        
        var self = this;        
        self.value = params.value;                        
    },
    template: {element: 'my-widget-template'}
});

ko.applyBindings({}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<my-widget-list></my-widget-list>

<script id="my-widget-list-template" type="text/html">
    <div data-bind="foreach:values">
        <my-widget params="value: $data"></my-widget><br>
    </div>
</script>

<script id="my-widget-template" type="text/html">
    <span data-bind="text: value"></span>
    <button data-bind="click: $parent.deleteWidget">Delete</button>
</script>

现在,我想调用my-widget-list的deleteWidget按钮被按下时的功能.

我想过

• 将父视图模型引用传递给子项 …

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

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

HomePageViewModel

var viewModel = (function () {
    function viewModel() {
        this.message = ko.observable("Welcome to DKT!");
        this.newsFeedViewModel = new gr.viewModel();
        this.newsFeedViewModel2 = new gr.viewModel();
        this.newsFeedViewModel.message("Message 1");
        this.newsFeedViewModel2.message("Message 2");
    }
    return viewModel;
})();

NewsFeedViewModel

var viewModel = (function () {
    function viewModel() {
        this.message = ko.observable("This is the profile!");
    }
    return viewModel;
})();

正如你所看到的,HomePageViewModel包含了两者NewsFeedViewModel.我现在希望能够将这些作为我的两个组件的DataContext/BindingContext使用,但这似乎不起作用.

Home.html中

<news-feed data-bind="newsFeedViewModel"></news-feed>
<news-feed data-bind="newsFeedViewModel2"></news-feed>

这两个组件都不使用ViewModel,HomePageViewModel而是使用新的 …

有没有办法配置一个Knockout组件来替换容器元素而不是将其内容嵌套在容器元素中？

例如,如果我有一个my-custom-element使用以下模板注册的自定义组件:

<tr>
    <p>Hello world!</p>
</tr>

是否可以使用这样的组件:

<table>
    <tbody>
        <my-custom-element></my-custom-element>
    </tbody>
</table>

最终产品是这样的:

<table>
    <tbody>
        <tr>
            <p>Hello world!</p>
        </tr>
    </tbody>
</table>

而不是:( Knockout默认情况下渲染组件的方式)

<table>
    <tbody>
        <my-custom-element>
            <tr>
                <p>Hello world!</p>
            </tr>
        </my-custom-element>
    </tbody>
</table>

根据这个问题的答案,似乎这个功能内置于模板引擎中,我假设在渲染组件模板时也会使用它.

是否存在指定的组件应与呈现方式renderMode的replaceNode？

我知道"虚拟元素"语法,它允许在HTML注释中定义组件:

<table>
    <tbody>
        <!--ko component { name: 'my-custom-element' }--><!--/ko-->
    </tbody>
</table>

但我真的不喜欢这种语法 - 在评论中编写真正的代码感觉就像一个肮脏,肮脏的黑客.