Как я могу получить доступ к атрибуту из шаблона?

Question

В этом примере я ожидаю, что он скажет "здравствуй, мир", но мир не подобран из сказанного атрибута.

(function () {
    'use strict';

    $(function () {
        // Set up a route that maps to the `filter` attribute
        can.route(':filter');

        // Render #app-template
        $('#app').html(can.view('appTemplate', {}));

        // Start the router
        can.route.ready();
    });

    can.Component.extend({
        tag: "say",
        scope: {
            saying: function(){
                return this.attr('saying')
            },
            greeting: 'salutations'
        },
        template: can.view("sayTemplate")
    });

})();

Шаблоны:

<div id="app"></div>

<script id="appTemplate" type="text/mustache">
  <b>Hello</b>
  <say saying="world"></say>
</script>

<script id="sayTemplate" type="text/mustache">
    <b>{{saying}}.</b> <i>{{greeting}}</i>
</script>

Answer 1

Вам нужно сообщить компоненту, что вы хотите получить доступ к простым значениям атрибутов, например:

can.Component.extend({
  tag: "app-say",
  scope: {
    saying: '@',
    greeting: 'salutations'
  },
  template: can.view("sayTemplate")
});

Посмотри на эту скрипку. В конечном итоге вы можете захотеть использовать наблюдаемый атрибут из состояния вашего приложения вместо простого строкового значения. Это может выглядеть так:

var appState = new can.Map({
    name: 'World'
});

$(function () {
    // Set up a route that maps to the `filter` attribute
    can.route(':filter');

    // Render #app-template
    $('#app').html(can.view('appTemplate', appState));

    // Start the router
    can.route.ready();
});

can.Component.extend({
    tag: "app-say",
    scope: {
        greeting: 'salutations'
    },
    template: can.view("sayTemplate")
});

И шаблон как:

<div id="app"></div>

<script id="appTemplate" type="text/mustache">
  <b>Hello</b>
  <app-say saying="{name}"></app-say>
  <div><input type="text" can-value="name"></div>
</script>

<script id="sayTemplate" type="text/mustache">
    <b>{{saying}}.</b> <i>{{greeting}}</i>
</script>

Это также создает перекрестное поле ввода, которое будет обновлять имя везде, когда вы обновляете текстовое поле. Скрипка здесь.