data-bind:list #368
Comments
|
Hold that thought - I've been staring at this code all day, and I think it's actually working but my unit tests are not checking the correct indices of the fake data... I think I want to celebrate but I need to get the tests passing first... going for a break now and I will try and complete this before I go out tonight. |
|
It works! The problem was just me being dumb in the unit test... for the last hour or so, the functionality was actually working, but my assumptions in the tests were wrong. |
|
Here's the HTML structure I'm using in the unit tests for this: <!doctype html>
<h1>Customer overview</h1>
<customer-list>
<ul>
<li data-template>
<customer-details>
<dl>
<dt>ID</dt>
<dd data-bind:text="id">000</dd>
<dt>Name</dt>
<dd data-bind:text="name">Customer Name!</dd>
<dt>Address</dt>
<dd>
<span data-bind:text="address.street">Address Line 1</span>
<span data-bind:text="address.line2">Address Line 2</span>
<span data-bind:text="address.cityState">Address City</span>
<span data-bind:text="address.postcodeZip">Address Postcode</span>
<span data-bind:text="address.country.name">Address Country</span>
</dd>
<dt>Latest orders</dt>
<!-- the use of a custom element allows data-bind:list to be left blank, so the
list name will be the same as the element name (camel-cased to orderList) -->
<order-list data-bind:list>
<ul>
<li data-template>
<dl>
<dt>City / State</dt>
<dd data-bind:text="shippingAddress.cityState"></dd>
<dt>Subtotal</dt>
<dd data-bind:text="subtotal">£0.--</dd>
<dt>Shipping</dt>
<dd data-bind:text="shippingCost">£0.--</dd>
<dt>Total</dt>
<dd data-bind:text="totalCost">£0.--</dd>
</dl>
<h3>Items in order</h3>
<ul data-bind:list="itemList">
<li data-template>
<h4><a href="/item/{{id}}" data-bind:text="title">Item name</a></h4>
<p data-bind:text="cost">£0.--</p>
</li>
</ul>
</li>
</ul>
</order-list>
</dl>
</customer-details>
</li>
</ul>
</customer-list> |
|
Before this is made into a PR, I think there's a few tweaks left. The main one is whether or not this functionality works when the root data structure is an object with a list property, rather than in this case a list of multiple objects... basically this works with |
… object improvements) (#415) * build: upgrade dom requirement and loosen version range * docs: update examples * feature: trim whitespace when there are only template children closes #363 * maintenance: phpstorm analysis improvements * test: refactor test helper class * wip: add test data for big integration * test: add failing test to cover nested objects for #356 * test: add extra cases for nested object test * feature: allow nesting of object properties closes #356 * maintenance: static analysis improvement * test: nested objects with bindgetter functions * test: isolate issue #367 * test: use `data-template-parent` attribute internally instead of id closes #367 * test: isolate functionality for #368 * wip: implementation for #368 not yet completed * feature: data-bind:list closes #368 * tidy: static analysis improvements * tidy: types of reflection method improved * tidy: remove unused import * tidy: nullable reflection type * tidy: remove unused elements * docs: add nested music example
* build: upgrade dom requirement and loosen version range * docs: update examples * feature: trim whitespace when there are only template children closes #363 * maintenance: phpstorm analysis improvements * test: refactor test helper class * wip: add test data for big integration * test: add failing test to cover nested objects for #356 * test: add extra cases for nested object test * feature: allow nesting of object properties closes #356 * maintenance: static analysis improvement * test: nested objects with bindgetter functions * test: isolate issue #367 * test: use `data-template-parent` attribute internally instead of id closes #367 * test: isolate functionality for #368 * wip: implementation for #368 not yet completed * feature: data-bind:list closes #368 * tidy: static analysis improvements * tidy: types of reflection method improved * tidy: remove unused import * tidy: nullable reflection type * tidy: remove unused elements * docs: add nested music example * refactor: data-list for #416 * refactor: data-list for #416 * refactor: data-list for #416 * refactor: data-list for #416
To make things nice and simple with nested lists, a new bind key can be used to specify which property of the bound object should be used for automatically binding the nested list.
The text was updated successfully, but these errors were encountered: