{"id":18264892,"url":"https://github.com/bem/bem-mvc","last_synced_at":"2025-06-23T11:36:02.066Z","repository":{"id":9389502,"uuid":"11251298","full_name":"bem/bem-mvc","owner":"bem","description":"Yet another MVC for i-bem","archived":false,"fork":false,"pushed_at":"2017-07-28T13:20:06.000Z","size":481,"stargazers_count":30,"open_issues_count":26,"forks_count":27,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-28T13:03:38.372Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bem.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-07-08T10:01:51.000Z","updated_at":"2024-10-04T01:03:43.000Z","dependencies_parsed_at":"2022-09-20T13:33:59.037Z","dependency_job_id":null,"html_url":"https://github.com/bem/bem-mvc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bem/bem-mvc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bem%2Fbem-mvc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bem%2Fbem-mvc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bem%2Fbem-mvc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bem%2Fbem-mvc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bem","download_url":"https://codeload.github.com/bem/bem-mvc/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bem%2Fbem-mvc/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261469576,"owners_count":23163128,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T11:16:25.260Z","updated_at":"2025-06-23T11:35:57.051Z","avatar_url":"https://github.com/bem.png","language":"JavaScript","funding_links":[],"categories":["Stale"],"sub_categories":["JS Libraries \u0026 Utilities"],"readme":"# Yet another MVC for i-bem\n\nНабор i-bem блоков для реализации MVC-паттерна. Предоставляет API для работы с моделями и блоки для автоматического провязывания моделей с интерфейсом.\n\nТребования к моделям\n*   Декларативный стиль описания моделей\n*   Доступ к созданным экземплярам моделей по имени и id \n*   Автоматическое приведение значений полей к заданному типу\n*   Валидация моделей\n\nТребование к биндингам\n*   i-bem ориентированность\n*   Наследование собственной функциональности в использующих i-bem блоках\n*   Провязка с контролами из [bem-controls](https://github.com/bem/bem-controls)\n\nЗависимости\n*   [bem-bl](https://github.com/bem/bem-bl)\n*   [bem-controls](https://github.com/bem/bem-controls)\n\n## Модели\nДля использования модели необходимо задекларировать её, указав имя модели и описав поля.\n````javascript\nBEM.MODEL.decl('model', {\n    name: 'string',\n    birth: { \n        type: 'string',\n        preprocess: function(value) {\n            return value.year + '.' + value.month + '.' + value.day;\n        }\n    },\n    height: 'number',\n    weight: 'number'\n});\n````\nТакже при декларации можно указать методы модели (переопределение базовых методов модели породит ошибку).\n````javascript\nBEM.MODEL.decl('model', {\n    name: 'string',\n    hasBoyfriend: {\n        type: 'boolean',\n        default: false\n    }\n}, {\n    toggleStatus: function() {\n        this.set('hasBoyfriend', !this.get('hasBoyfriend'));\n\n        return this;\n    }\n});\n\nvar model = BEM.MODEL.create('model', { name: 'Claudia Schiffer', hasBoyfriend: true });\nmodel.toggleStatus();\nmodel.get('hasBoyfriend'); // false\n````\nТипы полей\n*  string – строка\n*  number – число\n*  boolean – булеан\n*  model – модель\n*  array – массив произвольных данных\n*  models-list – список моделей одного типа\n\nЧтобы создать модель, нужно указать имя модели и, если нужно, передать инициализационные параметры\n````javascript\nvar model = BEM.MODEL.create('model', {\n    name: 'Claudia Schiffer',\n    birth: {\n        year: 1970,\n        month: 8,\n        day: 25\n    },\n    weight: 75,\n    height: 180.5\n});\n````\n\nВ случае, когда отсутствует ссылка на экземпляр модели, ее можно запросить из хранилища, например, по имени\n````javascript\nvar model = BEM.MODEL.get('model')[0];\n````\n\nТеперь можно устанавливать поля модели\n````javascript\nmodel\n    .set('weight', '80') // будет приведено к number\n    .set('height', 180)\n    .update({\n        weight: 80,\n        height: 180\n    });\n````\n\nИ получать их значения\n````javascript\nmodel.get('weight'); // 80\nmodel.get('birth'); // '1970.8.25'\n\nmodel.toJSON(); // все поля модели\n````\n\nО изменениях можно узнавать с помощью событий\n````javascript\nmodel.on('weight', 'change', function() {\n    alert('Пора худеть!');\n});\n````\n\nЧтобы валидировать модель, нужно задать правила валидации\n````javascript\nBEM.MODEL.decl('model-with-validation', {\n    name: 'string',\n    birth: { \n        type: 'string',\n        preprocess: function(value) {\n            return value.year + '.' + value.month + '.' + value.day;\n        }\n    },\n    height: { \n        type: 'number',\n        validation: {             // задать функцию валидации\n            validate: function(value) {\n                return value \u003e= 170; \n            }\n        }\n    },\n    weight: {\n        type: 'number',\n        validation: {\n            rules: {               // или правила валидации:\n                required: true,      // стандартное\n                toFat: {             // и кастомное\n                    needToValidate: function() {        // проверить нужно ли выполнять валидацию\n                        return this.get('height') \u003e 170;\n                    },\n                    validate: function(value) {\n                        return value \u003c= 90;\n                    }\n                }\n            }\n        }\n    }\n});\n````\nИ проверить на валидность\n````javascript\nmodel.isValid();\n````\n\n## Биндинги\nДля провязывания модели с DOM-представлением используется блок i-glue. Блок которой \"проклеивает\" модель и DOM.\nДля того, чтобы провязать модель с каким либо контролом, необходимо на родительский блок примешать блок i-glue, а на контрол элемент model-field блока i-glue и указать им параметры модели.\nBEMJSON в таком случае будет выглядеть так:\n````javascript\n{\n    block: 'b-model',\n    mix: [{\n        block: 'i-glue',                   // примешиваем блок i-glue\n        js: {\n            modelName: 'model',            // указываем имя модели\n            modelData: {\n                name: 'Claudia Schiffer',  // и данные\n                weight: 75,\n                height: 180.5\n            }\n        }\n    }],\n    content: [\n        ...\n\n        {\n            block: 'input', \n            mix: [{                        // на поле ввода примешиваем элемент model-field\n                block: 'i-glue', \n                elem: 'model-field',\n                js: {\n                    name: 'weight',         // указываем ему с каким полем провязываться\n                    type: 'input'\n                }\n            }],\n            name: 'weight',\n            value: '75', \n            mods: { size: 's' },\n            content: { elem: 'control' }\n        }\n        \n        ...\n    ]\n}\n````\nПосле инициализации будет создана модель, с указанными данным. И изменения в поле ввода, будут автоматически отражаться в модели (и наоборот).\n\nТипы биндингов (модификаторы model-field)\n*  input – провязка с блоком input\n*  select – провязка с блоком select\n*  checkbox – провязка с блоком checkbox\n*  inline – вставка значения поля в html\n*  mod – изменение модификатора блока\n\n## Агрегация моделей\nИногда создание моделей с помощью блока `i-glue` может быть неудобной. Для случая, когда данные для модели генерируются во время шаблонизации, можно использовать блок `i-model`.\n```javascript\n{\n    block: 'i-model',\n    modelName: 'super-model',\n    modelData: {\n        name: 'Claudia Schiffer',\n        weight: 75,\n        height: 180.5\n    }\n}\n// или\n{\n    block: 'i-model',\n    modelParams: {\n        name: 'super-model',\n        data: {\n            name: 'Claudia Schiffer',\n            weight: 75,\n            height: 180.5\n        }\n    }\n}\n```\nВ таком случае в DOM'е появится столько элементов, сколько в конечном bemjson'е блоков i-model. Чтобы избежать засорения DOM'а вспомогательными объектам, можно любой контент обернуть в блок `i-model-aggregator`\n```javascript\n{\n    block: 'i-model-aggregator',\n    content: [\n        { block: 'i-model', modelName: 'model1' },\n        {\n            block: 'view-block',\n            content: [\n                { block: 'i-model', modelName: 'model2' }\n            ]\n        },\n        { block: 'i-model', modelName: 'model3' }\n    ]\n}\n```\nВ итоге все блоки `i-model` внутри агрегатора будут объединены в один и модели будут проинициализированы до инициализации других блоков.\n\n## Unit-тестирование\n\n### В консоли\nТесты располагаются в директории `tests/specs` согласно файловой структуре.\n\nЗапуск `npm test`\n\n### В браузере\nТесты располагаются в файлах `*.test.js`.\n\nЗапуск `bem server`\n\nОткрыть страницу `localhost:8080/desktop.bundles/tests/tests.html`\n\n\n\n## Lint\nЗапуск `npm run lint`\n\n## Ссылки\nJS Docs:\n\n*  [Models API](https://github.com/dosyara/yamvc/blob/master/common.blocks/i-model/i-model.md)\n*  [i-glue](https://github.com/dosyara/yamvc/blob/master/common.blocks/i-glue/i-glue.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbem%2Fbem-mvc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbem%2Fbem-mvc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbem%2Fbem-mvc/lists"}