JsViews Kästchen zum Ankreuzen Bindung von einer inneren Schleife

Question

Ich versuche, eine Zweiweg für eine Checkbox in einer inneren Schleife

Nicht sicher mit JsViews Bindung zu erhalten, wenn dies möglich ist.

<div id="targetSelection"></div> 
<script id="targetItem" type="text/x-jsrender"> 
    <b>{^{:text}}</b> 
    <div id="answers_{^{:fieldName}}" class='collapse'> 
    {^{for answers ~fieldName=fieldName}} 
    <label> 
     <input type="checkbox" data-fieldName="{{>~fieldName}}" data-index="{{:index}}" data-link="{:selected}" checked="{^{:selected}}" /> {{:text}} : {^{:selected}} 
    </label> 
    <br /> {{/for}} 
    </div> 
    <br /> 
</script> 

und der JS-Code:

var target = [{ 
    "fieldName": "GENDER", 
    "text": "Gender", 
    "answers": [{ 
    "index": 1, 
    "text": "Male" 
    }, { 
    "index": 2, 
    "text": "Female" 
    }, ] 
}, { 
    "fieldName": "AGE", 
    "text": "Age", 
    "answers": [{ 
    "index": 1, 
    "text": "15-19" 
    }, { 
    "index": 2, 
    "text": "20-24" 
    }, { 
    "index": 3, 
    "text": "25-29" 
    }, { 
    "index": 4, 
    "text": "30-34" 
    }, { 
    "index": 5, 
    "text": "35-39" 
    }, { 
    "index": 6, 
    "text": "40-44" 
    }, { 
    "index": 7, 
    "text": "45+" 
    }, ] 
}]; 

$.each(target, function(questionIndex, question) { 
    $.each(question.answers, function(answerIndex, answer) { 
    answer.selected = true; 
    }); 
}); 

$("#targetSelection").html($.templates("#targetItem").render(target)); 

http://jsfiddle.net/22q7z9n9/

Ich bin auch versucht, ein Ereignis ausgelöst, wenn das Kontrollkästchen

Vielen Dank im Voraus geändert wird

Answer 1

Bitte benutzen Sie Überprüfen Sie die JsViews Dokumente? Sie rufen die Methode render() auf, nicht die Methode link(), und verwenden Sie jsrender.js nicht jsviews.js!

Sie müssen also wie in Example page laden jsviews.js, und dann schreiben: $.templates("#targetItem").link("#targetSelection", target);

Siehe http://www.jsviews.com/#jsv-quickstart

Sobald Sie die Grundlagen gelesen haben, können Sie entlang der Linien weiter:

{^{for answers}} 
    <label> 
    <input type="checkbox" data-link="selected" /> 
    {{:text}} : {^{:selected}} 
    </label> 
    <br /> 
{{/for}} 

Für das Ereignis gibt es einige Optionen, einschließlich, um direkt an das Eingabeänderungsereignis zu binden, oder beobachtbare Änderungen in Ihren Daten usw. zu hören (http://www.jsviews.com/#observe). Siehe die Beispiele ...

Hier ist eine funktionierende Version http://jsfiddle.net/28Lezc9m/4/.

Ich habe auch geändert: <div id="answers_{^{:fieldName}}" class='collapse'> zu <div data-link="id{:'answers_ + fieldName" class='collapse'> - wie in this tutorial sequence erläutert.