Geek Answers Handbook

JS knockout does not clean components

So here is the weird KnockoutJS problem that I have never encountered before.

I am working on an application that uses knockout components very much.

In one part of the application, I have an editor page that is dynamically built from a JSON-driven backend and that fills the front page with several widgets, depending on what it said from the back data.

Example rear end can send

[{"widget": "textBox"},{"widget": "textBox"},{"widget": "comboBox"},{"widget": "checkBox"}]

This will cause the front end to create a page containing

<html>
  ....
  <textbox></textbox>
  <textbox></textbox>
  <combobox></combobox>
  <checkbox></checkbox>
  ....
</html>

Each of the custom tags is a separate KnockoutJS component compiled as an AMD module and loaded using RequireJS, each component is based on the same boiler plate:

/// <amd-dependency path="text!application/components/pagecontrols/template.html" />
define(["require", "exports", "knockout", 'knockout.postbox', "text!application/components/pagecontrols/template.html"], function (require, exports, ko, postbox) {
    var Template = require("text!application/components/pagecontrols/template.html");
    var ViewModel = (function () {
        function ViewModel(params) {
            var _this = this;
            this.someDataBoundVar = ko.observable("");
        }
        ViewModel.prototype.somePublicFunction = function () {
            postbox.publish("SomeMessage", { data: "some data" });
        };
        return ViewModel;
    })();
    return { viewModel: ViewModel, template: Template };
});

, " " -.

, :

<div data-bind="foreach: pageComponentsToDisplay">
    <!-- ko if: widget == "textBox" -->
    <textBox params="details: $data"></textBox>
    <!-- /ko -->

    <!-- ko if: widget == "comboBox" -->
    <comboBox params="details: $data"></comboBox>
    <!-- /ko -->

    <!-- ko if: widget == "checkBox" -->
    <checkBox params="details: $data"></checkBox>
    <!-- /ko -->
</div>

pageComponentsToDisplay - , , , :

pageComponentsToDisplay = ko.observableArray([]);
pageComponentsToDisplay(data);

"" JSON

, - ODD.

"" ,

pageComponentsToDisplay = ko.observableArray([]);

, , , , , , , :

pageComponentsToDisplay(data);

, , , , , .

, , , , PubSub, , .

, , KO , .

, , 3 , , 4, , .

, , .

, , github:

https://github.com/shawty/dotnetnotts15

- , , .

, Typescript, , JS.

Shawty

1

, ( " " cl3m) .

, Ryan Niemeyer PubSub 'ko postbox'.

, "" , , , .

, VM (, , , ​​ ) .

, , , .

, , postbox , , var object .

.

2

. .

+4
2

, -, , Knockout , , .

, , ,

ko.postbox.subscribe("foo", function(payload) { ... });

, , . , .

, , , , API, , -, , - , , , , .

, , , , , , . ( , )

​​ , postbox.subscribe , , , "" , , , , .

, , , , ,

/// <amd-dependency path="text!application/components/pagecontrols/template.html" />
define(["require", "exports", "knockout", 'knockout.postbox', "text!application/components/pagecontrols/template.html"], function (require, exports, ko, postbox) {
    var Template = require("text!application/components/pagecontrols/template.html");
    var ViewModel = (function () {
        function ViewModel(params) {
            var _this = this;
            this.someDataBoundVar = ko.observable("");
            this.mySubscriptionHandler = ko.postbox.subscribe("foo", function(){
              // do something here to handle subscription message
            });
        }
        ViewModel.prototype.somePublicFunction = function () {
            postbox.publish("SomeMessage", { data: "some data" });
        };
        return ViewModel;
        ViewModel.prototype.dispose = function () {
          this.mySubscriptionHandler.dispose();
        };
        return ViewModel;
    })();
    return { viewModel: ViewModel, template: Template, dispose: this.dispose };
});

, "dispose", , KnockoutJS , KO-, KO , , .

, Iv'e , , , , , , , dispose .

, , , . , Typescript, , , , , , .

+1

, , , , ko.utils.domNodeDisposal.addDisposeCallback() custom bindings. , components:

ko.bindingHandlers.tooltip = {
    init: function(element, valueAccessor) {
      $(element).tooltip(options);
      ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
        $(element).tooltip('destroy');
      });
   }
}

-

+1

More articles:


All Articles