标签: knockout-components

使用普通的视图模型,我可以在它的上下文之外的初始化之后调用一个函数,如下所示:

var ViewModel = function () {
    this.Foo = function () {
        alert("bar");
    };
};

var vm = new ViewModel();
ko.applyBindings(vm);

vm.Foo();

http://jsfiddle.net/h01ky3pv/

如何使用组件的视图模型执行此类操作？我想打电话FooComponentViewModel的Foo功能,首先加载foo的组件时.

ko.components.register("foo", {
    viewModel: FooComponentViewModel,
    template: {
        element: "component-foo"
    }
});

function FooComponentViewModel(params) {
    this.Foo = function () {
        alert("bar");
    };
}

var ViewModel = function () {
    // empty
};

var vm = ViewModel();
ko.applyBindings();

http://jsfiddle.net/r3d41q6c/2/

我正在努力推进淘汰赛3.2中的自定义组件.如果我使用预定义的参数,一切都很好.例如,这是jsFiddle.

但是当我从我的视图模型传递参数时(我已经阅读了如何在这里做)我没有得到任何东西:jsFiddle.我究竟做错了什么？

这是我的js代码:

ko.components.register('pagination', {
    viewModel: function (params) {
        var self = this;
        this.page = ko.observable(params.page);
        this.max = ko.observable(params.max);

        this.list = ko.pureComputed(function () {
            var a = self.page(),
                list = [],
                min = a - 2 < 1 ? 1 : a - 2,
                max = a + 2 > self.max() ? self.max() : a + 2;

            for (var i = min; i <= max; i++) {
                list.push(i);
            }
            return ko.observableArray(list);
        });

        this.callback = …

我想要这样的东西:

<base-component>
    <sec-component>
    </sec-component>
</base-component>

是否有可能在淘汰组件的帮助下实现这一目标？

我正在尝试使用knockout 3.2中的自定义组件并从组件中更新observable.以下是我的自定义组件的示例:

ko.components.register('voting', {
    viewModel: function(params) {
        var self        = this;
        this.votes      = params.votes;
        this.yourVote   = params.yourVote;

        this.callback   = function(num){
            self.yourVote(parseInt(num));  // here I am updating
            self.votes( self.votes() + parseInt(num) );
        };
    },
    template: { element: 'voting-tpl' }
});

它的模板看起来像这样:

<voting params="votes: votes(), yourVote: yourVote()"></voting>
<template id="voting-tpl">
    <div data-bind="click:function(){callback(1)}">Up</div>
    <div data-bind="text: votes"></div>
    <div data-bind="click:function(){callback(-1)}">Down</div>
</template>

问题是,当我点击我的完整JS小提琴中的向上/向下功能时.我明白了

未捕获错误:除非指定"写入"选项,否则无法将值写入ko.computed.如果要读取当前值,请不要传递任何参数.

当然,我可以var a = new Vm();从组件内部使用和更新它,a.yourVote(num);但这会破坏组件的整体概念.

我怎么能正确地做到这一点？

我可以创建在其中使用子标记的非空Knockout组件吗？

一个示例是用于显示模式对话框的组件,例如:

<modal-dialog>
  <h1>Are you sure you want to quit?</h1>
  <p>All unsaved changes will be lost</p>
</modal-dialog>

其中与组件模板一起:

<div class="modal">
  <header>
    <button>X</button>
  </header>

  <section>
    <!-- component child content somehow goes here -->
  </section>

  <footer>
    <button>Cancel</button>
    <button>Confirm</button>
  </footer>
</div>

输出:

<div class="modal">
  <header>
    <button>X</button>
  </header>

  <section>
    <h1>Are you sure you want to quit?</h1>
    <p>All unsaved changes will be lost</p>
  </section>

  <footer>
    <button>Cancel</button>
    <button>Confirm</button>
  </footer>
</div>

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

关键是,我使用requireJS来加载我的模块/组件异步.那么我如何知道所有绑定都已注册？

演示JS小提琴

ko.applyBindings();

ko.components.register('my-component',
    {
        viewModel: function() {
            this.name = ko.observable('My Name');
        },
        template: '<input type="text" data-bind="value: name"></input>'
    }
);

// Moving it here, it works:
// ko.applyBindings();

当我用谷歌搜索“ 淘汰谷歌地图 ”时，我发现很多基于KO的谷歌地图实现。我能够找到的所有方法都可以使用自定义绑定处理程序，而我本来打算将其实现为Knockout组件。

例子：

• http://www.codeproject.com/Articles/351298/KnockoutJS-and-Google-Maps-binding
• http://www.hoonzis.com/knockoutjs-and-google-maps-binding/
• https://github.com/manuel-guilbault/knockout.google.maps

任何人都可以向我指出正确的方向，为什么在这里比KO组件更喜欢自定义绑定处理程序？

我计划的用例是这样的：

我正在实现一个包含地址搜索结果列表的页面。到目前为止，列表是KO组件，每个列表条目是由另一个KO组件生成的，列表组件反复在foreach绑定中调用该组件。在此搜索结果列表的旁边，我需要一张Google地图，该地图也在结果中显示结果条目。列表，列表条目和地图之间也会有很多交互。

到目前为止，这是我得到的：

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

    var initMap = function() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 13,
            center: {lat: 51.4387974, lng: 6.9922915}
        });
    };
  
    initMap();
};
$(document).ready(function() {
  ko.components.register('gmap', {
    viewModel: GMap,
    template: { element: 'gmap' }
  });
  ko.applyBindings();
});

#map {
  height: 400px;
  width: 600px;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.22"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<gmap></gmap>
<template id="gmap">
  <div id="map"></div>
</template>

我想了解为什么当属性是原型时,knockout的行为会有所不同,尤其重要的是,如何避免它,同时仍然使用原型.
我想要覆盖一些方法,因为我有一个我们要继承的基本视图模型

以下是我的意思

JSFIDDLE WITH PROTOTYPE [尝试输入第一个输入框,它将出现在另一个输入框中]

var viewModel = function(params) {
        this.params =  params;
    };
    viewModel.prototype.text = ko.observable(this.params  && this.params.initialText || '');


ko.components.register('message-editor', {
    viewModel: viewModel,
    template: 'Message: <input data-bind="value: text" /> '
            + '(length: <span data-bind="text: text().length"></span>)'
});
 
ko.applyBindings();

<!-- ko component: "message-editor" -->
<!-- /ko -->
<br />
<!-- ko component: "message-editor" -->
<!-- /ko -->


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

没有PROTOTYPE的JSFIDDLE [尝试输入第一个输入框,它不会出现在另一个输入框中]

var viewModel = function(params) {
        this.params =  params;
        this.text = ko.observable(this.params  && this.params.initialText || '');
    };


ko.components.register('message-editor', …