參考

如果在管理異步操作方面存在問題，請參考以下檔案:

• Odoo's RPC returns JavaScript's native Promise object. You will get requested data once Promise is resolved. You can learn more about Promise here: https:// developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/Promise.

創建新的視圖

本節，我們將創建一種新的視圖，用于展示作者及其圖書資訊，

準備

本節，我們使用之前的my_library模塊，因為視圖有很復雜的結構，每個視圖都有其實作的目標，本節的目標是讓你理解MVC模型下的視圖及如何創建簡單的視圖，我們將創建m2m_group的視圖，目標是以組的形式展示記錄，為了將記錄分配到不同的組，視圖使用的是many2many的資料，在my_library模塊中，我們有author_ids欄位，我們將以作者分組并展示圖書，
此外，我們將在控制區新增一個按鈕，可允許我們新增圖書記錄，同時，我們也會在作者的卡片上新增一個按鈕，用于重定向到另一個視圖，

步驟

1. 添加新的視圖型別

class View(models.Model):
	_inherit = 'ir.ui.view'

	type = fields.Selection(selection_add=[('m2m_group', 'M2m Group')])

2. 新建視圖模式

class ActWindowView(models.Model):
	_inherit = 'ir.actions.act_window.view'

	view_mode = fields.Selection(selection_add=[('m2m_group', 'M2m group')], ondelete={'m2m_group': 'cascade'})

3. 繼承base模型實作新的方法，該方法將從JavaScript呼叫

class Base(models.AbstractModel):
	_inherit = 'base'

	@api.model
	def get_m2m_group_data(self, domain, m2m_field):
		records = self.search(domain)
		result_dict = {}
		for record in records:
			for m2m_record in record[m2m_field]:
				if m2m_record.id not in result_dict:
					result_dict[m2m_record.id] = {
                        'name': m2m_record.display_name,
                        'children': [],
                        'model': m2m_record._name
	                }
                result_dict[m2m_record.id]['children'].append({
                    'name': record.display_name,
                    'id': record.id
                })
        return result_dict

4. 添加/static/src/js/m2m_group_model.js

odoo.define('m2m_group.Model', function(require){
    'use strict';
    var AbstractModel = require('web.AbstractModel');

    var M2mGroupModel = AbstractModel.extend({
        __get: function(){
            return this.data;
        },
        __load: function(params){
            this.modelName = params.modelName;
            this.domain = params.domain;
            this.m2m_field = params.m2m_field;
            return this._fetchData();
        },
        __reload: function (handle, params){
            if ('domain' in params){
                this.domain = params.domain;
            }
        },
        _fetchData: function(){
            var self = this;
            return this._rpc({
                model: this.modelName,
                method: 'get_m2m_group_data',
                kwargs: {
                    domain: this.domain,
                    m2m_field: this.m2m_field
                }
            }).then(function(result){
                self.data = https://www.cnblogs.com/xushuotec/archive/2021/03/11/result;
            })
        },
    });
    return M2mGroupModel;
})

5. /static/src/js/m2m_group_controller.js

odoo.define('m2m_group.Controller', function(require) {
    'use strict';
    
    var AbstractController = require('web.AbstractController');
    var core = require('web.core');
    var qweb = core.qweb;

    var M2mGroupController = AbstractController.extend({
        custom_events: _.extend({}, AbstractController.prototype.custom_events, {
            'btn_clicked': '_onBtnClicked',
        }),
        renderButtons: function($node){
            if($node){
                this.$buttons = $(qweb.render('ViewM2mGroup.buttons'));
                this.$buttons.appendTo($node);
                this.$buttons.on('click', 'button', this._onAddButtonClick.bind(this));
            }
        },
        _onBtnClicked: function(ev){
            this.do_action({
                type: 'ir.actions.act_window',
                name: this.title,
                res_model: this.modelName,
                views: [[false, 'list'], [false, 'form']],
                domain: ev.data.domain
            });
        },
        _onAddButtonClick: function(ev){
            this.do_action({
                type: 'ir.actions.act_window',
                name: this.title,
                res_model: this.modelName,
                views: [[false, 'form']],
                target: 'new'
            });
        },
    });
    return M2mGroupController;
});

6. 添加/static/src/js/m2m_group_renderer.js

odoo.define('m2m_group.Renderer', function(require){
    'use strict';
    
    var AbstractRenderer = require('web.AbstractRenderer');
    var core = require('web.core');
    var qweb = core.qweb;

    var M2mGroupRenderer = AbstractRenderer.extend({
        events: _.extend({}, AbstractRenderer.prototype.events, {
            'click .o_primay_button': '_onClickButton',
        }),
        _render: function(){
            var self = this;
            this.$el.empty();
            this.$el.append(qweb.render('ViewM2mGroup', {
                'groups': this.state,
            }));
            return this._super.apply(this, arguments);
        },
        _onClickButton: function(ev){
            ev.preventDefault();
            var target = $(ev.currentTarget);
            var group_id = target.data('group');
            var children_ids = _.map(this.state[group_id].children, function(group_id){
                return group_id.id;
            });
            this.trigger_up('btn_clicked', {
                'domain': [['id', 'in', children_ids]]
            });
        }
    });
	return M2mGroupRenderer;
});

7. 添加/static/src/js/m2m_group_view.js

odoo.define('m2m_group.View', function(require){
    'use strict';

    var AbstractView = require('web.AbstractView');
    var view_registry = require('web.view_registry');
    var M2mGroupController = require('m2m_group.Controller');
    var M2mGroupModel = require('m2m_group.Model');
    var M2mGroupRenderer = require('m2m_group.Renderer');

    var M2mGroupView = AbstractView.extend({
        display_name: 'Author',
        icon: 'fa-id-card-o',
        config: _.extend({}, AbstractView.prototype.config, {
            Model: M2mGroupModel,
            Controller: M2mGroupController,
            Renderer: M2mGroupRenderer,
        }),
        viewType: 'm2m_group',
        searchMenuTypes: ['filter', 'favorite'],
        accesskey: "a",
        init: function(viewInfo, params){
            this._super.apply(this, arguments);
            var attrs = this.arch.attrs;

            if(!attrs.m2m_field){
                throw new Error('M2m view has not define "m2m_field" attribute.');
            }

            // Model Parameters
            this.loadParams.m2m_field = attrs.m2m_field;
        },
    });
    view_registry.add('m2m_group', M2mGroupView);

    return M2mGroupView;
})

8. 添加/static/src/xml/qweb_template.xml

<t t-name="ViewM2mGroup">
    <div >
        <div t-foreach="groups" t-as="group" >

            <t t-set="group_data" t-value="https://www.cnblogs.com/xushuotec/archive/2021/03/11/groups[group]"/>
            <div >
                <img  t-attf-src="https://www.cnblogs.com/web/image/#{group_data.model}/#{group}/image_512"/>
                <div >
                    <h5 >
                        <t t-esc="group_data['name']"/>
                    </h5>

                </div>
                <ul >
                    <t t-foreach="group_data['children']" t-as="child">
                        <li >
                            <i />
                            <t t-esc="child.name"/>
                        </li>
                    </t>
                </ul>
                <div >
                    <a href="https://www.cnblogs.com/xushuotec/archive/2021/03/11/#"  t-att-data- group="group">View books</a>
                </div>
            </div>
        </div>
    </div>
</t>
<div t-name="ViewM2mGroup.buttons">
    <button type="button" >
        Add Record
    </button>
</div>

9. 添加所有的js檔案

...
<script type="text/javascript" src="https://www.cnblogs.com/my_library/static/ src/js/m2m_group_view.js" />
<script type="text/javascript" src="https://www.cnblogs.com/my_library/static/ src/js/m2m_group_model.js" />
<script type="text/javascript" src="https://www.cnblogs.com/my_library/static/ src/js/m2m_group_controller.js" />
<script type="text/javascript" src="https://www.cnblogs.com/my_library/static/ src/js/m2m_group_renderer.js" />
...

10. 最后，添加新視圖實體

<record id="library_book_view_author" model="ir. ui.view">
    <field name="name">Library Book Author</field>
    <field name="model">library.book</field>
    <field name="arch" type="xml">
        <m2m_group m2m_field="author_ids" color_ field="color">
        </m2m_group>
    </field>
</record>

11. 添加動作

...
<field name="view_mode">tree,m2m_group,form</field> 
...

更新視圖后如下：

重要資訊
Odoo視圖非常易于使用，并且非常靈活，然而，通常情況下，簡單和靈活的事物都有復雜的實作，odoojavascript視圖也是如此：它們易于使用，但實作起來很復雜，它們由許多組件組成，包括模型、渲染器、控制器、視圖和QWeb模板，在下一節中，我們為視圖添加了所有必需的組件，并為library.book模型，如果不想手動添加所有內容，請從本書的GitHub存盤庫中的示例檔案中獲取一個模塊，

原理

步驟1、2，我們在ir.ui.view和ir.actions_act_window.view注冊了名為m2m_group的新視圖，
步驟3，在base中我們新增了名為get_m2m_group_data的方法，在base中新增可滿足任何模型中呼叫的需求，該函式將在JavaScript的RPC中呼叫，視圖會有兩個引數，domain和m2m_field，在domain中，domain的值是搜索視圖domain及action domain的組合，m2m_field是我們計劃分組的元素，將在視圖中定義，
后面幾步，我們新增了JavaScript檔案，Odoo中的JavaScript視圖是由view，model，renderer，及controller構成，由于歷史原因，單次view在odoo中有其特殊的含義，因此，傳統意義上的model、view、controller(MVC)變成了model、renderer、controller(MRC)，view與model、renderer、controller的關系如下:

Model、Renderer、Controller、View是組成視圖的基本元素，

• Model: model是視圖的狀態載體，負責發送RPC請求資料，并傳遞資料給controller及renderer，我們重寫了__load和__reload方法，當視圖在初始化的將呼叫__load()獲取資料，當搜索條件變化或視圖有一個新的狀態的時候，__reload()將被呼叫，在我們的案例中，我們創建了用于RPC請求資料的_fetchData()方法，可實作呼叫服務器側模型的方法get_m2m_group_data(步驟3中定義)，__get()是在controller中呼叫獲取模型狀態，
• Controller: Controller負責將Model和Renderer串起來，當Renderer中的action被觸發的時候，它將傳遞相關資訊給controller并執行該action，有時，它也將呼叫Model中的方法，此外，它也負責管理控制面板上的按鈕，在我們的例子中，我們創建了添加記錄的按鈕，為了實作此目標，我們需重寫AbstractController中的renderButtons()函式，我們也需要注冊custom_events，以便在點擊作者卡片上的按鈕時，能夠觸發相關動作（點擊button->觸發事件->controll捕獲事件->回應），
• Renderer: renderer負責管理DOM元素，每種視圖都有其獨特的渲染方式，在渲染器中，你可以獲取Model的狀態，并通過render()渲染視圖，在我們的例子中，我們渲染了ViewM2mGroup QWeb模板，并把JavaScript事件與動作進行關聯，本節，我們系結了卡片按鈕的點擊事件，當用戶點擊了按鈕，將觸發btn_clicked事件，并打開該作者的圖書串列，

重要貼士
events和custom_events是不同的，events是JavaScript常規的事件，而custom_events源自odoo的JavaScript的框架，用戶自定義事件可通過trigger_up觸發，

• View: View負責用于獲取構成視圖的基本元素，比如fields、context、view arch以及其他的元素，然后，View將初始化controller、renderer、model，通常，View還將為model、view、controller準備相關引數，在我們的例子中，Model是以m2m_field的值進行分組，因此我們設定了model的引數，同樣，this.controllerParams和this.rendererParams將用于controller及renderer，

步驟8，我們添加了QWeb模板用于視圖及控制面板，關于QWeb模板更多的內容，可學習本章中“使用用戶側QWeb模板”一節，

重要資訊
Odoo視圖有各種各樣的函式，我們在本章中學了最常用的一些函式，如果你想要學習更多的內容，可查看/addons/web/static/src/js/views目錄，該目錄也包含abstract model、controller、renderer及view的內容，

步驟9，添加JavaScript檔案，
最后，最后兩步，我們添加了book.library模型的視圖，步驟10，我們使用<m2m_group>標簽及m2m_field屬性，這將用于從服務器獲取資料，

更多

如果你只是想對現有視圖進行調整，你可以使用js_class，比如，如果我們想要創建一個類似于kanban的視圖，可如下操作:

var CustomDashboardRenderer = KanbanRenderer.extend({...});
var CustomDashboardModel = KanbanModel.extend({...});
var CustomDashboardController = KanbanController.extend({...});
var CustomDashboardView = KanbanView.extend({
	config: _.extend({}, KanbanView.prototype.config, {
		Model: CustomDashboardModel,
		Renderer: CustomDashRenderer,
		Controller: CustomDashboardController,
	}),
});

var viewRegistry = require('web.view_registry');
viewRegistry.add('my_custom_view', CustomDashboardView);

然后我們呼叫帶有js_class屬性的kanban視圖:

...
<field name="arch" type="xml">
	<kanban js_>
		...
	</kanban>
</field>
...

除錯用客戶端側的代碼

對于服務器側的代碼除錯，我們在第七章進行了詳細介紹，本節，我們將對客戶端側代碼除錯進行說明，

準備

步驟

除錯客戶端側代碼之所以麻煩是因為web客戶端嚴重依賴于Jquery的異步事件，因為斷點會中斷代碼執行，因此很有可能由于時間問題引起的BUG并不會被觸發，

1. 對于客戶端除錯，您需要使用資產激活除錯模式，如果您不知道如何使用資產激活除錯模式，請閱讀第1章“安裝Odoo開發環境”中的“激活Odoo開發工具”配方，
2. 在你感興趣的JavaScript函式中，呼叫除錯器:

debugger;

3. 如果你有計時問題，可以通過JavaScript函式登錄控制臺:

console.log("I'm in function X currently");

4. 如果你想在模板渲染程序中進行除錯，可以從QWeb呼叫除錯器:

<t t-debug="" />

5. 您也可以使用QWeb登錄控制臺，如下所示:

<t t-log="myvalue" />

所有這一切都依賴于您的瀏覽器提供適當的除錯功能，雖然所有的主流瀏覽器都能做到這一點，但為了便于演示，我們在這里只討論Chromium，為了能夠使用除錯工具，點擊右上角的選單按鈕并選擇更多工具|開發人員工具:

原理

當除錯器打開時，你應該會看到類似下面的截圖:

在這里，您可以在不同的選項卡中訪問許多不同的工具，前面螢屏截圖中當前活動的選項卡是JavaScript除錯器，我們通過單擊行號在第31行中設定斷點，每當我們的小部件獲取用戶串列時，執行應該在這一行停止，除錯器將允許您檢查變數或更改它們的值，在右側的觀察串列中，您還可以呼叫函式來嘗試它們的效果，而不必不斷保存腳本檔案并重新加載頁面，
一旦打開了開發人員工具，我們前面描述的除錯器陳述句的行為將是相同的，然后，執行將停止，瀏覽器將切換到Sources選項卡，打開有問題的檔案，并突出顯示debugger陳述句所在的行，
前面提到的兩種日志記錄的可能性將在控制臺選項卡中結束，這是您在任何情況下都應該檢查的第一個選項卡，因為如果一些JavaScript代碼由于語法錯誤或類似的基本問題而根本無法加載，那么您將看到一條錯誤訊息，解釋發生了什么，

更多

使用Elements選項卡檢查瀏覽器當前顯示的頁面的DOM表示，在熟悉現有小部件生成的HTML代碼時，這將被證明是有幫助的，而且一般來說，它還允許您使用類和CSS屬性，這是測驗布局變化的一個很好的資源，
Network選項卡提供了當前頁面發出的請求的概覽，以及它花費了多長時間，在除錯緩慢的頁面加載時，這很有幫助，因為在Network選項卡中，您通常會找到請求的詳細資訊，如果您選擇了一個請求，您可以檢查傳遞給服務器的有效負載和回傳的結果，這有助于您找出客戶端意外行為的原因，您還將看到請求的狀態碼(例如，404)，以防由于檔案名拼寫錯誤而找不到資源，

通過引導提升互動感

在開發了一個大型的應用程式之后，向最終用戶解釋軟體流程是至關重要的，Odoo框架包括一個內置的向導管理器，有了這個導覽器，您就可以通過學習特定流程來指導最終用戶，在此菜譜中，我們將創建一個向導來引導用戶創建一本書，

準備

步驟

1. 添加/static/src/js/my_library_tour.js檔案

odoo.define('my_library.tour', function (require) {
    "use strict";
    var core = require('web.core');
    var tour = require('web_tour.tour');
    var _t = core._t;
    tour.register('library_tour', {
        url: "/web",
        rainbowManMessage: _t("Congrats, you have listed a book."),
        sequence: 5,
    }, [tour.stepUtils.showAppsMenuItem(), {
        trigger: '.o_app[data-menu-xmlid="my_library. library_base_menu"]',
        content: _t('Manage books and authors in <b>Library app</b>.'),
        position: 'right'
    }, {
        trigger: '.o_list_button_add',
        content: _t("Let's create new book."),
        position: 'bottom'
    }, {
        trigger: 'input[name="name"]',
        extra_trigger: '.o_form_editable',
        content: _t('Set the book title'),
        position: 'right',
    }, {
        trigger: '.o_form_button_save',
        content: _t('Save this book record'),
        position: 'bottom',
    }]);
});

2. 將js檔案添加到后臺資源

<script type="text/javascript" src="https://www.cnblogs.com/my_library/static/ src/js/my_library_tour.js" />

更新模塊如下:

原理

向導管理器在web_tour.tour命名空間中，
步驟1，我們引入了web_tour.tour，隨后我們通過registry()添加了向導，我們注冊了名為library_tour的向導并配置URL(向導的作用URL)，
下一個引數是這些向導步驟的串列，一個瀏覽步驟需要三個值，觸發器用于選擇應該在其上顯示游覽的元素，這是一個JavaScript選擇器，我們使用選單的XML ID，因為它在DOM中可用，
第一步tour. steputils . showappsmenuitem()是tour中為主選單預定義的步驟，下一個鍵是內容，當用戶將滑鼠懸停在tour drop上時將顯示內容，我們使用_t()函式是因為我們想要轉換字串，而position鍵用于決定行程洗掉的位置，可能的值包括top、right、left或bottom，

重要資訊
這些向導可改善了用戶體驗，以及管理集成測驗，當您在內部以測驗模式運行Odoo時，它也會運行向導，但是如果向導未完成，將導致測驗用例失敗，

手機端js（企業版可用）