Knockout bileşenini kullanırken kapsayıcı öğeyi değiştir

Question

- yapılandırması için kapsayıcı öğesinin içeriğini kapsayıcı öğesinin içine yerleştirmek yerine kapsayıcı öğesinin yerine yerleştirmenin bir yolu var mı? Aşağıdaki şablonu ile my-custom-element olarak kayıtlı özel bir bileşen varsa, örneğin

:

<table> 
    <tbody> 
     <my-custom-element></my-custom-element> 
    </tbody> 
</table> 

Ve son ürüne sahip:

<tr> 
    <p>Hello world!</p> 
</tr> 

böyle bileşeni kullanmak için mümkün mü

<table> 
    <tbody> 
     <tr> 
      <p>Hello world!</p> 
     </tr> 
    </tbody> 
</table> 

Bunun yerine: (yol Knockout r

<table> 
    <tbody> 
     <my-custom-element> 
      <tr> 
       <p>Hello world!</p> 
      </tr> 
     </my-custom-element> 
    </tbody> 
</table> 

Based on the answer to this question varsayılan olarak enders bileşenleri), işlevselliği ben bileşen şablonları işlerken de kullanılır varsayıyorum şablon motoru, yerleşik görünüyor.

Bir bileşenin replaceNode ile işlenmesi gerektiğini belirtmenin bir yolu var mı?

Ben bileşenleri bir HTML yorumun içindeki tanımlanmasına izin verir "sanal eleman" sözdizimi, farkındayım:

<table> 
    <tbody> 
     <!--ko component { name: 'my-custom-element' }--><!--/ko--> 
    </tbody> 
</table> 

ama gerçekten bu sözdizimi sevmediğim - Yorum bir gibi hissediyor içindeki gerçek kod yazmadan kirli, kirli kesmek.

Answer 1

bu seçeneği olmaması böyle, kütüphanenin niteliği dikkate alınarak (orada dedim o) olarak savunulabilir hayal ve geliştiricinin ekibi felsefesi:

Nakavt bir kütüphane ve diğer MVC'ın bunun aksine uygulamanızı yapılandırmak için çerçeve tanımlı bir yol kullanmaya zorlamaz. Knockout'daki şablon motorunu ve hemen hemen tüm diğer JS şablonlama motorlarını (Açısal, alt çizgi, bıyık, vb.) Düşünürseniz, Knockout, 'modding' yerel HTML5 oluşturmayan tek kişi olarak ortaya çıkar. Diğerleri özel bir etiket kullanıyorlar, <% %> veya {{ }} olsun, etiketleri anlamlı bir şeye dönüştürmek için küçük bir JS ayrıştırıcısı gerekiyor (şimdi KO ayrıca bıyık tarzı etiketler içeren bir Knockout punches eklentisine de sahiptir ve kuşkusuz KO at "günah" a <!-- ko --> yorum ile küçük bir bit). KO yerine, HTML 5 özel öğeleri, yorum ve özellik etiketleri, tamamen "vanilya" kullanır.

Örneğin, 'nesne (ve gerçek hayat?) Hiyerarşisi' JS/DOM türü kullanılır: yalnızca ebeveynler çocuklarına numaralı güçte egzersiz yapabilir ve böylece bağlı öğesi değiştirilmez, ancak büyütülür. çocuklarla.Örnek için: Daha sonra

// we cannot do this in JS 
document.getElementById('elem').remove(); //implied .remove(self) 
// instead we do this 
var elem = document.getElementById('elem'); 
container = elem.parentNode.removeChild(elem); 

, tercih edilen bir yol verileri bağlayıcı, KO ile bağlanma foreach ile de gösterildiği gibidir:

<div data-bind="foreach: myList"> 
    <span data-bind="text: $data"></span> 
</div> 

önceki pasajı, bir JS bir HTML temsilidir dizi, hiyerarşi tekrar görünür geçerli:

var myArr = [1,2,3,4,5]; 
// we cannot do the following without reference to the array index, 
// which is not held by the object itself,  
// but a meta-property getting meaning relative to the parent 
myArr[0].splice(0,1); //remove 

Bu perfe olma HTML görünümüne yol açar JS verilerinizin çoğaltılması (ve birisinin bir HTML belgesindeki veri bağlama girinti düzeylerini (with ve foreach ile) gösteren bir araç oluşturduğunu görmek ilginç olacaktır. Bununla birlikte, bazı durumlarda, HTML'inizin düzenini bozmamanız için yorum etiketlerine, veya css kurallarınıza (yuvalama), örneğin metin arasında enjekte edilecek 'salt metin' bileşenine (i18n) ihtiyacınız vardır. düğümleri:

<p>Some predefined text with 
<!-- ko text: 'some variable text' --><!-- /ko --> 
and more predefined text</p> 

Ya

<!-- ko if: !hidden() --><div id="myToggleableDiv"></div><!-- /ko --> 

gizli sonra standardize olan custom tags vardır ve bir cehennem çok daha net bir zaman yer kaplar için boş bir öğesi istemiyorsanız ; ama maalesef henüz% 100 hazır değil. Önce data-bind, <!-- ko --> saniye ve <custom> üçüncü (tam olarak uygulanırsa daha yüksek) seçin. Her nasılsa onu görüyorum. senin bileşeni liste modeli tutarsa ​​özel durumunuzun gelince, bunu yapabilirsiniz: Bir listitem modeli ise

<table data-bind="{component: {name: 'custom', params {..}}"></table> 

Ve senin VM başka tbody dahil, aşağıdaki yöntemlerden birini kullanabilirsiniz üç biri '

<table> 
    <tbody data-bind="foreach: mylist"> 
    <tr data-bind="foreach: properties"> 
     <td data-bind="component: {name: 'custom', params: $data}></td> 
    </tr> 
    </tbody> 
</table> 

: sözdizimi, örneğin SOC principle bağlı kalarak, yorum sözdizimini

<table> 
    <tbody data-bind="foreach: mylist"> 
    <!-- ko component: {name: 'custom', params: $data} --><!-- /ko --> 
    </tbody> 
</table> 

örneğin Veya belirli bir ebeveyn (tablo) içine yuvalanmış olma şartından tamamen bileşeni decouple

veya özel bir etiketle: tercih bu sırayla

<table> 
    <tbody data-bind="foreach: mylist"> 
    <tr data-bind="foreach: properties"> 
     <td><custom params= "{data: myData"></custom></td> 
    </tr> 
    </tbody> 
</table> 

..

Answer 2

Müjde! Knockout 3.3.0'da sadece Passing markup into components konseptini tanıttılar. Bu, bileşeninizin içindeki $componentTemplateNodes şablonunu kullanarak yapılır. bağlantılı örnekten

: Bu [adlandırılmış şablonu oluşturma] gibi geliyor

<template id="my-special-list-template"> 
    <h3>Here is a special list</h3> 

    <ul data-bind="foreach: { data: myItems, as: 'myItem' }"> 
     <li> 
      <h4>Here is another one of my special items</h4> 
      <!-- ko template: { nodes: $componentTemplateNodes, data: myItem } --><!-- /ko --> 
     </li> 
    </ul> 
</template> 

<my-special-list params="items: someArrayOfPeople"> 
    <!-- Look, I'm putting markup inside a custom element --> 
    The person <em data-bind="text: name"></em> 
    is <em data-bind="text: age"></em> years old. 
</my-special-list>