Czy można przekazać element niestandardowy obiektowi dla params, tak jak komponent może powiązać komponent?

Question

Czy nokaut custom element ma atrybut params powiązany z obiektem takim jak Component binding?

przykład I mają następujące składnik zdefiniowane:

ko.components.register('user-widget', { 
    template: '<p><span data-bind = "text:fullName" ></span></p>', 
    viewModel: function (params) { 
     this.fullName = params.firstName + ' ' + params.lastName; 
    } 
}); 

I następujące VM:

function VM() { 
    this.user = { 
     firstName: 'Joe', 
     lastName: 'Baker' 
    }; 
} 

W przypadku zastosowania składnika wiążącego może przekazać właściwość użytkownika o VM bezpośrednio params atrybut tak:

<div data-bind='component:{name:"user-widget", params:user}'></div> 

Jednak przy użyciu niestandardowego elementu muszę rozpakować t on własnością użytkownika tak:

<user-widget params="firstName:user.firstName, lastName:user.lastName"></user-widget> 

Próbowałem za element niestandardowy ze składnikiem wiążącym tak:

<user-widget data-bind='component:{params:user}'></user-widget> 

co powoduje następujący błąd:

Cannot use the "component" binding on a custom element matching a component

JsFiddle

Answer 1

Cóż, musisz zmienić komponent, aby zaakceptować parametr użytkownika, a nie każdy oddzielny parametr.

<user-widgetx params='user: user'></user-widgetx> 

ko.components.register('user-widgetx', { 
    template: '<p><span data-bind = "text:fullName" ></span></p>', 
    viewModel: function (params) { 
     this.fullName = params.user.firstName + ' ' + params.user.lastName; 
    } 
}); 

fiddle

---

ja zbadać ideę szczypanie wiążącego dostawcę do podłączenia do analizowania kodu. Udało mi się załatwić sprawy. Ale muszę cię ostrzec, to z całą pewnością hack. To było testowanie przy użyciu Knockout v3.2 i nie gwarantuję, że to zawsze zadziała. Przynajmniej dopóki nie dodadzą innych sposobów na rozszerzenie podstawowej funkcjonalności nokautu.

Patrząc na źródło, zauważyłem, że kod parsujący params używa wbudowanego parsera wiązania knockout. Jeśli więc w jakiś sposób możemy podłączyć się do analizatora składni, możemy dostosować sposób interpretowania łańcuchów wiążących w celu osiągnięcia tego, czego chcemy.

Celem jest utworzenie nowego typu wiązania, aby analizowane wyrażenie było traktowane jako rzeczywisty obiekt wiązania. Mogłoby to dalej używać poza parametrami komponentu. W ten sposób możemy to zrobić w naszych wiązań/params:

<user-widget params='${user}'></user-widget> 

Teraz wszystko w ${ } można traktować jako wiążącej/params obiektu.

(function() { 
    var originalParseBindingsString = ko.bindingProvider.prototype.parseBindingsString, 
     re = /^\$\{(.+)\}$/; 

    function extractBindableObject(objExpr, bindingContext, node, options) { 
     var objBindingString = '_object: ' + objExpr, 
      objGetter = originalParseBindingsString.call(this, objBindingString, bindingContext, node, options), 
      obj = objGetter['_object'](); 
     return objectMap(obj, function (value) { 
      return function() { return value; }; 
     }); 
    } 

    function objectMap(obj, mapper) { 
     if (!obj) return obj; 
     var result = {}; 
     for (var prop in obj) { 
      if (obj.hasOwnProperty(prop)) 
       result[prop] = mapper(obj[prop], prop, obj); 
     } 
     return result; 
    } 

    ko.bindingProvider.prototype.parseBindingsString = function (bindingsString, bindingContext, node, options) { 
     var m = bindingsString.match(re); 
     if (m) { 
      return extractBindableObject.call(this, m[1], bindingContext, node, options); 
     } 
     return originalParseBindingsString.apply(this, arguments); 
    }; 
}()); 

fiddle