Knockout + require + Director build single page program (knockout)

Next, I'll introduce knockout's application on the basis of the previous article.

Of course, first of all, show download the files required for this chapter Knockout.js And Knockout-amd-helpers.js,knockout-amd-helpers.js's main role in this section is that knockout can render the entire HTML file directly while rendering the template without defining the template in the current Web page.

Secondly, the project structure following the introduction of the corresponding document is as follows:

Third, after introducing the knockout application, let's take a look at the changes in the corresponding file:

(1) First is the change of index.cshtml

<script data-main= "/scripts/framework/main" src= "/scripts/lib/require.js" ></script>
<main id= " Main "data-bind=" Template: {name: ' knockoutintroduction-html ', Data:require (' Knockoutintroduction-js '). Data, Afterrender:require (' Knockoutintroduction-js '). AfterRender} "></main>

Here we are going to use the Knokcout template function, using template to render our HTML template, of course not at this time the rendering is unsuccessful, Because we are not defining a template named Knockoutintroduction-html in a Web page.

Name: ' knockoutintroduction-html '

(2) want (1) The code can run normally out, we need to use our first introduction of the Knockout-amd-helpers.js this file, then we look at how the main.js can be achieved.

/* Author:ts date:2016/12/24 description:it ' s main entry point for require. * * var paths = {/* Todo:register all AMD modules by providing CamelCase aliases, exceptions are Requirejs plugins a 
    nd named AMD modules, whose names are fixed */* Follow files dictionary order * * ' jquery ': ' Scripts/lib/jquery ', "Text": "Scripts/lib/text", ' Knockout ': ' Scripts/lib/knockout ', ' knockout-amd-helpers ': ' Scripts/lib/knockout -amd-helpers ",//require ' requireintroduction-html ': ' templates/require/requireintroduction.html '," RequireIn Troduction-js ": ' Scripts/app/require/requireintroduction ',//knockout ' knockoutintroduction-html ': ' Templates/kno

Ckout/knockoutintroduction.html ', ' knockoutintroduction-js ': ' Scripts/app/knockout/knockoutintroduction ',};

var baseurl = '/';

Require.config ({baseurl:baseurl, paths:paths, shim: {}}); Require (["knockout", "Knockoutintroduction-js", "Knockout-amd-helpers", "text"], function (KO, knockoutintroduction) {ko.bindingHandlers.module.baseDir = "modules";
    fruits/vegetable modules have embedded template Ko.bindingHandlers.module.templateProperty = "Embeddedtemplate";
Ko.applybindings (knockoutintroduction);

}); Require (["jquery", "Requireintroduction-js", "text!        Requireintroduction-html "],//function ($, module, HTML) {//Console.log (" Start test require html! ");
$ (' #main '). HTML (HTML);
Console.log ("Start test require js!"); Module.
Testrequirejs ();

 //    }
//);

From the Main.js file we can see the introduction of knockout and knockout-amd-helpers.js in path and the HTML and JS files we tested for knockout. The final code is final.

Require (["knockout", "Knockoutintroduction-js", "Knockout-amd-helpers", "text"], function (KO, knockoutintroduction) {
    Ko.bindingHandlers.module.baseDir = "Modules";

    fruits/vegetable modules have embedded template ko.bindingHandlers.module.templateProperty
    = "Embeddedtemplate ";
    Ko.applybindings (knockoutintroduction);
});

The function of this line of code is that we use knockout template when we can directly use require (key) to load a separate HTML file, the specific implementation I did not go to study, I guess: please look at the code above the annotation code, this is our last chapter of the Code, At that time we use the text plug-in can require separate HTML files, the implementation of knockout-amd-helpers.js should be on the basis of text!html will be wrapped inside our HTML template The formation of a template can be identified or template template, of course, this is only my guess, I hope to know the friend can explain.

The last line of Ko.applybinding (Knockoutintroduction) is just the element that corresponds to the knockout binding, which is bound to the document by default when there is no explicit expenditure to bind the element.

Four, test knockout:

Before testing, let's look at the corresponding HTML and JS files for knockoutintroduction.

<div> This is the
    page for knockout!.

    <input data-bind= "Value:pagename"/>
</div>

Define ([' knockout '], function (KO) {
    function Requireintroductionviewmodel () {
    var self = this;

    Self.data = {
        PageName:ko.observable (' Knockout ')
    }

    Self.afterrender = function () {
        Console.log (' This is the function named AfterRender in Knockout.js ');
    }

return new Requireintroductionviewmodel ();
});

From the above code we see if the code is working properly, the Web page will appear on the corresponding HTML text description and a input,input content is JS file data. PageName value ' knockout ' and the console plays the contents of the AfterRender function.

So let's take a look at the display on the page:

You can see the display on the page is the result we want.

Five, Summary:

In this article we will use knockout template to render the HTML separate file in the previous page, just like the project structure diagram introduced at the beginning of this article, knockout operation at this time is the operation of HTML in require control, please take a look at the scope of the line in the diagram. , what is the purpose of doing so? The aim is to require the controlled files so that we can easily operate the file, And what if we set the name in template in the Main.js file to a mutable falge, and if we change the flag value, we will render different HTML pages, and the specific content will be introduced in the following article.

Source code: https://github.com/rodchen-king/knockout_require_director/tree/v1.2