की चर संख्या के साथ एक मेज प्रतिपादन मैं स्तंभों की चर संख्या के साथ जटिल तालिका प्रस्तुत करना पड़ता है। इस उदाहरण में कॉलम की संख्या subRow के प्रकार पर निर्भर करती है। उदाहरण के लिए, यदि subRow टाइप 1 है, तो इसमें 3 क्रियाएं हैं, यदि उपरो प्रकार 2 है, तो इसमें 4 क्रियाएं हैं। साथ में यह, 7 कार्यों है तो मेरी मेज है 7 कॉलम (+ पहले दो जहाँ मैं subRow नाम और प्रकार (वंश या बच्चों आदि) प्रस्तुत करना है, लेकिन यह कम महत्वपूर्ण है। इन पहले दो कॉलम हमेशा मौजूद होते हैं), तो 7 + 2 = 9 कॉलम एक पेड़ से उपरोक्त जोड़े जाते हैं (उदाहरण चित्र पर नहीं खींचे जाते हैं, क्योंकि यह इस समस्या के लिए प्रासंगिक नहीं है)।KnockoutJS से अधिक टेम्पलेट और स्तंभों
मैं इसे, इंटरनेट एक्सप्लोरर में काम करते हैं, क्योंकि मैं करने के लिए एक नॉकआउट टेम्पलेट पर हुक करने font टैग का उपयोग कर रहा बनाया, लेकिन मोज़िला फ़ायरफ़ॉक्स और गूगल क्रोम इस रेंडर करने के लिए सक्षम नहीं हैं।
मेरा प्रश्न है: font टैग की बिना तालिका में इस आकर्षित करने के लिए कैसे?
मैं कुछ अन्य टैग के खिलाफ कुछ होता नहीं है, जब तक कि Firefox एक IE यह प्रदान कर सकते हैं, लेकिन मैं उनमें से ज्यादातर की कोशिश की, और तेरा काम नहीं करते हैं।
एचटीएमएल:
<table>
<thead>
<tr>
<!--
So this is the table header. It defines number of columns in this table. Number of columns is variable, and this is the first part of the problem.
-->
<th class="tablehead" colspan="2">My List</th><th class="tablehead" data-bind="attr: { colspan: distinctActions().length }"> Actions </th><th class="tablehead"></th>
</tr>
</thead>
<tbody>
<tbody data-bind="template: { name: 'rowsTemplate', foreach: rowList } "></tbody>
</tbody>
पंक्ति टेम्पलेट:
<script type="text/x-jquery-tmpl" id="rowsTemplate">
<tr>
<td>
<button data-bind="click: save, enable: editMode()">Save</button>
</td>
<td>
<button data-bind="click: deleteRow, enable: !editMode()">X</button>
</td>
</tr>
<!--
this is the tricky part
for each "row" in this template i must repeat X subRows.
only way I found to do it is to "hook" subRowsTemplate on a <font> tag.
BUT the problem is only Internet Explorer is able to render this, neither
Mozilla Firefox or Chrome are able to do it.
(Everything MUST be in the same table, because of the
variable number of columns (defined in header))
-->
<font data-bind="template: { name: 'subRowsTemplate', foreach: objectList, templateOptions: { tmpRow: $data } } "></font>
सब कुछ छद्म कोड और तस्वीर के साथ और अधिक स्पष्ट हो जाएगा 210 SubRows टेम्पलेट:
</script>
<script type="text/x-jquery-tmpl" id="subRowsTemplate">
<tr>
<td> <span data-bind="text: name"></span> </td>
<td>
<input readonly="readonly" data-bind="visible: selectorList.length>0 && !$item.tmpRow.editMode(), value: chosenSelector().label"></input>
<select data-bind="visible: selectorList.length>0 && $item.tmpRow.editMode(), options: selectorList, optionsText: 'label', value: chosenSelector"></select>
</td>
<!--
Again the same problem as above, IF subRow IS first, i must draw ALL the actions (defined above in header).
So, if I have 3 actions defined in header, I must draw 3 <td> here. And again I have the same "solution",
which doesn't work in Mozilla and Chrome.
-->
<font data-bind="template: { name: 'actionTemplate', foreach: skill, templateOptions: { tmpParentIsFirst: isFirst, tmpObject: $data, tmpRow2: $item.tmpRow } }"> </font>
<td><div style="float:right;"><button data-bind="click: deleteRow">X</button></div></td>
</tr>
कार्रवाई टेम्पलेट:
</script>
<script type="text/x-jquery-tmpl" id="actionTemplate">
<td>
<div>
Content of action
</div>
</td>
</script>
चित्र:
