3m5-coco 中文文档教程

Question

3m5-coco

一个简单的 JavaScript MVC 框架 由 3m5 开发。 媒体有限公司

What is 3m5-coco?

• 基于 dejavu 类模型

• 使用 handlebars 模板引擎

• 使用 jQuery 进行 DOM 操作

• 使用 ES6 标准 - 由 babel 转译 --> ES5 标准发布到 npm

• 兼容 browserify 和 webpack

installation

这个框架是一个 npm 模块，使用

npm install 3m5-coco

Sample application.js

这个文件将让您体验如何使用 Coco.JS

/**
 * @author (c) Andreas Wiedenfeld <andreas.wiedenfeld@3m5.de>
 * updated at 16.09.2015
 */
/** @namespace **/

var Coco = require("3m5-coco");

var TestCollection = require("./test/testCollection");
var TestView2 = require("./test/testView2");

var CocoApplication = dejavu.Class.declare({

    initialize() {
        console.log("CocoTestApp initialized, look at available Coco-Classes: ", Coco);

        Coco.Translator.addEventListener(Coco.TranslatorEvent.CHANGE_LOCALE, (event) => {
          console.info("locale changed " + event.locale);
        });

        Coco.Translator.loadMessagesFromObject({
          title:  {
            1: "bla-de",
            2: "blub"
          },
          title2: "Hallo %0%"
        }, "de");

        Coco.Translator.loadMessagesFromObject({
          title:  {
            1: "bla-en",
            2: "blub-en"
          },
          title2: "Hallo %0%"
        }, "en");

        Coco.Translator.setLocale("de");
        console.log("i18n example (de): " + Coco.Translator.get("title.1"));
        console.log("i18n example with replacement: " + Coco.Translator.get("title2", ["Tom"]));

        //change locale
        Coco.Translator.setLocale("en");
        console.log("i18n example (en): " + Coco.Translator.get("title.1"));

        var innerModel = new Coco.Model({id:123, label:"innerModel", properts: "myInnerProperty"});
        var innerCollection = new TestCollection([{id:1, label:11}, {id:2, label:22}]);
        var testModel = new Coco.Model({id:12, label:"myLabel", property: innerModel, properties: innerCollection});

        innerCollection.add(innerModel);
        console.log(testModel.getAttributes());

        //initialize a simple router
        new Coco.Router('.routerView', {
            dashboard: {
                path: '/',
                view: require("./test/testView"),
                model: testModel
            },
            imprint: {
                path: '/testView2',
                view: TestView2
            }
        }, '/');
    }

});

$(document).ready(() => {
    new CocoApplication();
});

Coco.config = {
    baseUrl: "baseURL",              //server context path
    router: {
        loaderDelay: 300        // When views are swapped by Router, this time adjusts when the loading class
    },
    restService: {              //restService configuration
        path: null,             //restService path
        cacheGet: 600,          //cache time for GET Requests of same url in seconds
        cachePost: null         //cache time for GET Requests of same url in seconds
    }
};

Documentation

https://www.3m5.de/coco/

I hate the way you did

如果有什么不适合你，请提交一个拉取请求，让这个框架比现在更灵活。

License

Coco 在 ISC-License

[npm-url] 下：https://www.npmjs.com/package /3m5-可可