Passing params to children components in Knockout

falafel99

I have a template:

<template id="item-list">
  <form action="" data-bind="submit: addItem">
    <input type="text" name="addItem" data-bind="value: newItem">
    <button type="submit">Add Item</button>
  </form>
  <ul class="item-list" data-bind="foreach: items">
    <item params="title: title,
                  $element: $element,
                  $data: $data,
                  $parent: $parent"></item>
  </ul>
</template>
<template id="item">
  <li class="item" data-bind="text: title, click: $parent.removeItem"></li>
</template>
<item-list params="items: items"></item-list>

And a couple of components with some logic:

function Item(title) {
  this.title = title
}

ko.components.register('item-list', {
  viewModel: function(params) {
    this.items = ko.observableArray(params.items)
    this.newItem = ko.observable('')
    this.addItem = function() {
      this.items.push(new Item(this.newItem()))
    }
    this.removeItem = function(a) {
      this.items.remove(a.$data)
    }.bind(this)
  },
  template: {element: 'item-list'}
})

ko.components.register('item', {
  viewModel: function(params) {
    $.extend(this, params)
  },
  template: {element: 'item'}
})

function ViewModel() {
  this.items = [
    new Item('One'),
    new Item('Two'),
    new Item('Three')
  ]
}

var vm = new ViewModel()

ko.applyBindings(vm, document.body)

Is there a way to pass the item directly in the foreach so I don't have to do this?

<ul class="item-list" data-bind="foreach: items">
  <item params="title: title,
                $element: $element,
                $data: $data,
                $parent: $parent"></item>
</ul>

But rather something like:

<item params="$context"></item>

I am new to Knockout. I am aware that I could pass an object to the view model and operate on that object, so instead of this.title I would have to do this.object.title or this.$data.title and I would still have to pass $element and $parent manually.

Is there any other way to automate this that I am missing?

haim770

You can pass the $context as follows:

<item params="{ context: $context }"></item>

Then in component code:

viewModel: function(params) {
    var ctx = params.context;
    var itemData = ctx.$data;
    $.extend(this, itemData)
},

But, you don't seem to be making use of the context at all, you're only extending this with the passed item data. So, the following will do as well:

<item params="{ item: $data }"></item>

viewModel: function(params) {
    $.extend(this, params.item)
},

See Fiddle

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Passing parameters to children components in ionic

React: Passing match.params to children

Passing Components as children through a main Form component

React Props not passing down to children components?

Passing static props and dynamic params to Vue route with multiple components

Passing props to children components with react-router v4

Children to children components communication

How would I make it so that props.match.params.id can be accessed to any of the children Components?

When route params change what is the correct way to propagate updated inputs to children components

Undefined is not an object evaluating route.params.input. ERROR when passing data between components. REACT NATIVE

Vue.js 2.0 passing Auth::user() to children components in complex hierarchy

Passing a function down multiple children components in React using ES6

How do we create nested Vue Components passing other elements as their children

Passing Props to children, children is not a function

Communicating with Knockout components

Knockout custom components not updating

Knockout components communication

Knockout JS not clearing components

Load knockout components dynamically

Knockout Components Select Options

Knockout children of children loading/options in MVC

Passing params to function and casting

Passing self in a decorator with params

Rails params is not passing

Passing params through a Func<>

Passing params to inner function

Passing Object as Params in AsyncTask

Passing raw params to angular

confusion with params passing and routes

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    pump.io port in URL

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  5. 5

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  10. 10

    How to remove the extra space from right in a webview?

  11. 11

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  12. 12

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  13. 13

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

  14. 14

    java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

  15. 15

    How to use merge windows unallocated space into Ubuntu using GParted?

  16. 16

    flutter: dropdown item programmatically unselect problem

  17. 17

    Pandas - check if dataframe has negative value in any column

  18. 18

    Nuget add packages gives access denied errors

  19. 19

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  20. 20

    Generate random UUIDv4 with Elm

  21. 21

    Client secret not provided in request error with Keycloak

HotTag

Archive