knockout-components

Issue loading knockout components view model using requireJS

由 雨燕双飞 提交于 2019-12-29 07:12:15
问题 I am working with the new components functionality of knockout 3.2 and trying to load the components using requireJS. However, I am having a weird issue. Basically, when I hardcode the view model in the register function everything works fine. When I try to load the exact same view model using requireJS, it's not working correctly. Here's a sample of the html to load the component: <div data-bind="component: { name: 'test'}"></div> Here's the html in the template that this component will load

How to apply component bindings after ko.applyBindings() call

由 北城余情 提交于 2019-12-21 06:22:51
问题 Is there a way to apply component bindings after the ko.applyBindings() call? The point is, I use requireJS to load my modules/components async. So how do I know that all bindings are registered? Demo JS Fiddle 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(); 回答1: There are a couple of pieces that

KnockoutJS afterRender callback when all nested Components have been rendered?

由 这一生的挚爱 提交于 2019-12-21 04:16:16
问题 I have a hierarchy of nested KnockoutJS Components using 3.2.0. It's working very well but I'm looking to execute some code once my entire hierarchy of components has been loaded and rendered. It's a rough equivalent of afterRender(), needed for the same common uses cases as afterRender. I've tried a few approaches but no luck so far: Added the following to the root template but it gets called before the nested components are loaded, so too early. <!--ko template: {afterRender: onLoad.bind(

Communicating with Knockout components

由 蹲街弑〆低调 提交于 2019-12-11 04:15:52
问题 Is there a way to communicate from the parent viewmodel to a KnockoutJS component? I have a component that contains a bootstrap modal dialog box, to search for customers and return a selected customer. At present, to make the dialog box appear, I pass an observable boolean from the viewmodel in the component's params attribute. To make the dialog appear I set this to true, which invokes the dialog box. I also pass a callback function in params to return the results. Here is a fiddle demo

Knockout 3.2: can components / custom elements contain child content?

由 我与影子孤独终老i 提交于 2019-12-06 09:22:01
问题 Can I create non-empty Knockout components that use the child markup within them? An example would be a component for displaying a modal dialog, such as: <modal-dialog> <h1>Are you sure you want to quit?</h1> <p>All unsaved changes will be lost</p> </modal-dialog> Which together with the component template: <div class="modal"> <header> <button>X</button> </header> <section> <!-- component child content somehow goes here --> </section> <footer> <button>Cancel</button> <button>Confirm</button>

How to access custom element in a Knockout component?

由 99封情书 提交于 2019-12-06 00:56:22
问题 Take a look at this scenario : ko.components.register('hello', { viewModel: function() { }, template: "<h1>hello wrold</h1>" }); If I use <hello></hello> the generated html result will be: <hello><h1>hello world</h1></hello> But what if I want this: <hello class="hello"><h1>hello world</h1></hello> Then how can I get a reference to the custom element tag in a component? 回答1: The custom element contains the component, it is not considered part of it. Just like the outer tag used in a foreach ,

How to access custom element in a Knockout component?

由 天涯浪子 提交于 2019-12-04 06:15:54
Take a look at this scenario : ko.components.register('hello', { viewModel: function() { }, template: "<h1>hello wrold</h1>" }); If I use <hello></hello> the generated html result will be: <hello><h1>hello world</h1></hello> But what if I want this: <hello class="hello"><h1>hello world</h1></hello> Then how can I get a reference to the custom element tag in a component? The custom element contains the component, it is not considered part of it. Just like the outer tag used in a foreach , template or with binding. If you want to style that tag, you have to add the bindings to style it. The

Simple demo project Webpack KO(with a components) javascript

由 本秂侑毒 提交于 2019-12-02 05:17:02
问题 I want to build a SPA with javascript knockout components After lots of reading and fiddling I still can't seem to get a working javascript(no typescript) knockout( with components) project with webpack. I found simple knockout projects but can't get them working with webpack. Does someone have a demo project wit at least one ko component using webpack? The Yeoman generator-ko-spa (in javascript) working with Webpack would be great. Thnx 回答1: Here's how to set up a "Hello world" app from

Simple demo project Webpack KO(with a components) javascript

由 …衆ロ難τιáo~ 提交于 2019-12-02 01:06:55
I want to build a SPA with javascript knockout components After lots of reading and fiddling I still can't seem to get a working javascript(no typescript) knockout( with components) project with webpack. I found simple knockout projects but can't get them working with webpack. Does someone have a demo project wit at least one ko component using webpack? The Yeoman generator-ko-spa (in javascript) working with Webpack would be great. Thnx Here's how to set up a "Hello world" app from scratch: Installing packages Create a new folder Run npm init -y Install webpack related modules: npm install -

Replace container element when using Knockout component

由 佐手、 提交于 2019-12-01 18:34:40
问题 Is there a way to configure a Knockout component to replace the container element instead of nesting its content inside the container element? For example, if I have a custom component registered as my-custom-element with the following template: <tr> <p>Hello world!</p> </tr> Is it possible to use the component like this: <table> <tbody> <my-custom-element></my-custom-element> </tbody> </table> And have the final product be this: <table> <tbody> <tr> <p>Hello world!</p> </tr> </tbody> </table
订阅 knockout-components