New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

如何将页面模块化? #1655

Closed
rubyisapm opened this Issue Aug 3, 2016 · 9 comments

Comments

Projects
None yet
6 participants
@rubyisapm

rubyisapm commented Aug 3, 2016

因为是后台系统,页面相对复杂,有各种弹框操作。
我的想法是把vm的js和其相关的html都分离出来。
一种方法是单独分离:
在avalon1时,使用ms-include-src引用html;在js层面将每一个模块的vm分离为一个单独的模块,向外部提供方法。
但是ms-include-src在avalon2里删除了。所以我找不到方法可以让现有页面去引用另一个html模板文件。
另外还想到的一种方法:
使用avalon的组件概念;
但这个解决方案有一些问题:

  1. 这种组件定义很奇怪,不是为了重用,而是为了分离。似乎不符合组件的初衷。
  2. 组件定义时要写的是字符串,感觉相当难写难改,因为都是大段的html。

我想请教下老师,如何做是合理的方案?或者avalon里面有哪些特性是我可以用来解决这种问题的吗?

@RubyLouvre

This comment has been minimized.

Show comment
Hide comment
@RubyLouvre

RubyLouvre Aug 3, 2016

Owner

使用webpack 打包

Owner

RubyLouvre commented Aug 3, 2016

使用webpack 打包

@RubyLouvre

This comment has been minimized.

Show comment
Hide comment
@RubyLouvre

RubyLouvre Aug 3, 2016

Owner

webpack有一些插件可以将多个子页面合成一个完整的页面

Owner

RubyLouvre commented Aug 3, 2016

webpack有一些插件可以将多个子页面合成一个完整的页面

@rubyisapm

This comment has been minimized.

Show comment
Hide comment
@rubyisapm

rubyisapm Aug 4, 2016

好的,谢谢老师。

rubyisapm commented Aug 4, 2016

好的,谢谢老师。

@RubyLouvre

This comment has been minimized.

Show comment
Hide comment
@RubyLouvre

RubyLouvre Aug 4, 2016

Owner
  <div ms-controller="layout">
             <div id='header' ms-html="header">

            </div>

            <div id='sidebar' ms-html="@sidebar">

            </div>
            <div id='main' ms-html="@main">

            </div>
            <div id="footer" ms-html="@footer">

            </div>
        </div>
//这里的require是webpack,需要引入text-loader
        var h = require('text!header.html)
        var s = require('text!sidebar.html)
        var m = require('text!main.html)
        var f = require('text!footer.html)
        avalon.define({
           $id: "layout",
           header: h,
           sidebar: s,
           main: m,
           footer: footer
        })

更好的办法使用 underscore-template-loader, 用法见readme

Owner

RubyLouvre commented Aug 4, 2016

  <div ms-controller="layout">
             <div id='header' ms-html="header">

            </div>

            <div id='sidebar' ms-html="@sidebar">

            </div>
            <div id='main' ms-html="@main">

            </div>
            <div id="footer" ms-html="@footer">

            </div>
        </div>
//这里的require是webpack,需要引入text-loader
        var h = require('text!header.html)
        var s = require('text!sidebar.html)
        var m = require('text!main.html)
        var f = require('text!footer.html)
        avalon.define({
           $id: "layout",
           header: h,
           sidebar: s,
           main: m,
           footer: footer
        })

更好的办法使用 underscore-template-loader, 用法见readme

@RubyLouvre RubyLouvre closed this Aug 4, 2016

@caoqitong826

This comment has been minimized.

Show comment
Hide comment
@caoqitong826

caoqitong826 Aug 29, 2016

发现用text-loader 有问题,用text-webpack-loader 可以

caoqitong826 commented Aug 29, 2016

发现用text-loader 有问题,用text-webpack-loader 可以

@RubyLouvre

This comment has been minimized.

Show comment
Hide comment
@RubyLouvre

RubyLouvre Aug 29, 2016

Owner

你怎么用啊,我一直用得很好的

Owner

RubyLouvre commented Aug 29, 2016

你怎么用啊,我一直用得很好的

@liaohui1080

This comment has been minimized.

Show comment
Hide comment
@liaohui1080

liaohui1080 Mar 29, 2017

@rubyisapm 如果不用webpack 应该怎么做

liaohui1080 commented Mar 29, 2017

@rubyisapm 如果不用webpack 应该怎么做

@bingfengwx

This comment has been minimized.

Show comment
Hide comment
@bingfengwx

bingfengwx Apr 19, 2017

@liaohui1080 如果不使用webpack 可以试试模板引擎

bingfengwx commented Apr 19, 2017

@liaohui1080 如果不使用webpack 可以试试模板引擎

@liubin595338764

This comment has been minimized.

Show comment
Hide comment
@liubin595338764

liubin595338764 Sep 4, 2017

@RubyLouvre 请教下:打包成多个子页面的时候,我是使用vm嵌套,路由变化后加载子vm的内容,然后手动scan,那么子vm怎么监听获取父vm的数据变化呢?

liubin595338764 commented Sep 4, 2017

@RubyLouvre 请教下:打包成多个子页面的时候,我是使用vm嵌套,路由变化后加载子vm的内容,然后手动scan,那么子vm怎么监听获取父vm的数据变化呢?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment