KO 模板中的 JavaScript

Question

如何将脚本放入挖空模板中？

这行不通:

<script type="text/html" id="some-template">
    <div>
    ...
        <script type="text/javascript"> <!-- This is the problem -->
            CoinWidgetCom.go({
                wallet_address: "ENTER-YOUR-BITCOIN-WALLET-ADDRESS"
                , currency: "bitcoin"
                , counter: "count"
                , alignment: "bl"
                , qrcode: true
                , auto_show: false
                , lbl_button: "Donate"
                , lbl_address: "My Bitcoin Address:"
                , lbl_count: "donations"
                , lbl_amount: "BTC"
            });
        </script>
    ...
    </div>
</script>

...

<script src="http://coinwidget.com/widget/coin.js"></script>

This是我试图在每个使用 some-template 的元素中运行的脚本。脚本可能会被修改，但我宁愿使用原始版本。

Answer 1

你想要的是不可能的。我认为 text/html 脚本中带有可执行 javascript 的 script 标签不会在呈现模板时执行其代码。

但是，正如其他评论者所说:您不需要这样做。重新设计您的设计，利用 Knockout 的功能来处理这些类型的事情。有几种替代解决方案，包括:

创建您自己的 bindingHandler 以在呈现的模板上激活小部件。您只发布了一小部分代码，但代码如下所示:

ko.bindingHandlers.myWidget = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
        console.log('Initializing widget with ' + ko.toJSON(allBindings()['myWidget']));
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever any observables/computeds that are accessed change
        // Update the DOM element based on the supplied values here.
    }
};

var VmForTemplate = function() { }

var ViewModel = function() {
  this.subVm = new VmForTemplate();
};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<script type="text/html" id="some-template">
  <div data-bind='myWidget: {
                      wallet_address: "ENTER-YOUR-BITCOIN-WALLET-ADDRESS"
                      , currency: "bitcoin"
                      , counter: "count"
                      , alignment: "bl"
                      , qrcode: true
                      , auto_show: false
                      , lbl_button: "Donate"
                      , lbl_address: "My Bitcoin Address:"
                      , lbl_count: "donations"
                      , lbl_amount: "BTC"
                    }'>
  ... template ...
  </div>
</script>


<!-- ko template: { name: 'some-template', data: subVm } -->
<!-- /ko -->

或者，使用 the template binding 的 afterRender 属性，像这样:

var VmForTemplate = function() { }

var ViewModel = function() {
  this.subVm = new VmForTemplate();
  this.initWidget = function() { CoinWidgetCom.go({
                wallet_address: "ENTER-YOUR-BITCOIN-WALLET-ADDRESS"
                , currency: "bitcoin"
                , counter: "count"
                , alignment: "bl"
                , qrcode: true
                , auto_show: false
                , lbl_button: "Donate"
                , lbl_address: "My Bitcoin Address:"
                , lbl_count: "donations"
                , lbl_amount: "BTC"
            }); };
};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<script type="text/html" id="some-template">
    <div>
       Template. No javascript here.
    </div>
</script>

<script>
  // Mock the widget
  var CoinWidgetCom = { go: function(opts) { console.log('Running widget with options: ' + ko.toJSON(opts)); } };
</script>

<!-- ko template: { name: 'some-template', data: subVm, afterRender: initWidget } -->
<!-- /ko -->