Comments (3)
In your scenario you are wanting to data-link the innerHTML
of a <select>
- which is a different 'target' than the default value
. See this section for discussion of multiple targets: Full syntax – multiple targets, multiple tags, multiple bindings...
So you need to use the target html{...}
, for innerHTML
. You can at the same time bind to value
property, which is the default target for a <select>
element. So you will have something like:
<select data-link="html{for selectOptions tmpl='nameTmpl'} {:chosenOption:}"></select>
using the data:
var appData = {
chosenOption:"Option 2",
selectOptions: [{ option: "Option 1" }, { option: "Option 2" }],
};
Here is an updated version of your JsFiddle: https://jsfiddle.net/BorisMoore/g26dzp4a/2/
See also Data-linking to innerText / innerHTML
as well as the related sample using the jQueryUI {{selectMenu}}
control (second sample in the page)
from jsviews.
Ah yes, I should have caught that...1st time doing top-level data linking.
Thanks Boris!
from jsviews.
BTW, the same syntax for multiple targets, and the html{}
target for <select>
apply equally to regular linked template binding, as well as top-level binding.
see: https://jsfiddle.net/BorisMoore/vjz8f5h0/
Closing as "question" (not a bug)
from jsviews.
Related Issues (20)
- linked tag property changed handler called when it shouldn't HOT 51
- {{for ..}} emits <tr> and <td> tags HOT 1
- for tag with range and data-linked tr give error when removing object from array HOT 5
- Delimiters not working for "[ " and " ]" HOT 2
- linking of selected value on select element does not work correctly with all jquery versions HOT 5
- jsrender.min.js.map truncated HOT 6
- Observable change error, when loading jquery.observable.js before jsrender.js, and using contextual parameters and sorted {{for}} HOT 6
- removeView performance HOT 2
- $.observe/$.unobserve performance degradation over time HOT 5
- If the selected value of a data-linked <select> is set prior to adding options, selection is not always established correctly HOT 3
- multiselect not updating when linked array changes HOT 10
- Binding to computed functions: onBind callback called twice. If computed function has no setter , "... is not a function" exception thrown HOT 6
- html comments not working in tables HOT 4
- performance improvement in JsObservable HOT 2
- Formatting a number in data-link ? HOT 2
- Using a tmpl selector that begins with a # but is not an ID selector does not work HOT 5
- LinkTo not refreshing DOM on empty value HOT 5
- Checkboxgroup enhancement and oldValue issue HOT 26
- Observe array of objects path HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jsviews.