javascript - 如何在 odoo10 中创建一个简单的小部件

Question

如何在 odoo10 中创建一个简单的小部件？？对应代码为在 odoo10 中关注？我如何将此代码转换为 odoo10？

    local.HomePage = instance.Widget.extend({
        start: function() {
        this.$el.append("<div>Hello dear Odoo user!</div>");
        var greeting = new local.GreetingsWidget(this);
       return greeting.appendTo(this.$el);
    },
   });

Answer 1

在 Odoo-10 中创建小部件和模板

小部件:

• 小部件是在 odoo 中显示屏幕、字段和属性的不同或替代表示。
• Widget 允许使用不同的呈现模板更改 View ，还允许根据需要进行设计。

示例:

widget_name.js

odoo.define('module.model_name', function(require) {
    "use strict";
    var Widget = require('web.Widget');
    var core = require('web.core');
    var Model = require('web.Model');
  
    var QWeb = core.qweb;
    var _t = core._t;
  
    // here we are getting the value in an array.
    var widget_name = Widget.extend({
        //render your template
        "template" : "template_name",
    
        //initialize
        init : function () {
            var self = this;
            this._super(parent);
            //initialize values to variables
        }

        //Binding Events
        events : {
            'click .class_ex': 'method1',
            'click .class_ex1': 'method2',
        },
  
        start : function() {
            var self = this;
            this._super(parent); 
            //your functionality code and logic
        },

        //creating functions
        method1:function(){
            //do something when click event fire on class_ex
        },
        method2:function(){
            //do something when click event fire on class_ex
        },
    });

    return widget_name;
});

您需要像这样在 odoo 中添加此 .js 和 .css 文件。

assets_backend.xml

<odoo>
    <data>
        <template id="assets_backend" inherit_id="web.assets_backend">
            <xpath expr="script[last()]" position="after">
            <script type="text/javascript" src="/module/static/src/js/widget_name.js"></script>
            <link href="/module/static/src/css/home.css" rel="stylesheet"></link>
            </xpath>
        </template>
    </data>
</odoo>

设计小部件模板:

• 创建 XML 并在模板标签中添加 xml:space="preserve"作为参数。
• t-name 是在 .js 文件中定义的模板的名称，并且在您使用它时使用相同的名称作为 XML 中的小部件名称。

tmpl.xml

<?xml version="1.0"?>
<templates id="template" xml:space="preserve">
     <t t-name="template_name">
        <div class=”myclass”>
            //design your template here 
            <div class=”class_ex”>
                //body
            </div>
            <div class=”class_ex1”>
                //body
            </div>
        </div>
    </t>
</templates> 

注意:不需要在tmpl.xml文件中写odoo标签。

• 模板名称必须与 .js (widget_name.js) 文件中给定的名称相同。

如何使用小部件

• 通过操作或对象按钮使用小部件。

• 如下所示，我们将 template_name 添加到 action_registry，因此现在我们可以使用此名称来使用 XML 执行。

示例:

<record id="template_id" model="ir.actions.client">
    <field name="name">template name</field>
    <field name="tag">template_name</field>
    <field name="target">new</field>
</record>  

• 在此处设置您的“模板名称”
• 您还可以在按钮和字段上编写一些事件，然后制作一个处理事件的函数并执行呈现模板的函数。单击对象按钮时返回此 id (template_id) 作为结果。

您也可以像这样使用您的小部件。

<field name="mobile" widget="template_name" />