我在使用webpack时在我的入口点内加载css时得到了FOUC.如果我从webpack中删除我的css并将其作为普通链接包含在我的html文件中,那么FOUC的问题就会消失.
注意:这不仅仅是使用bootstrap框架,我已经使用Foundation和Materialize测试了相同的结果
下面发布的代码只是我使用Bootstrap的问题的一个测试示例.
Html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
</div>
</div> <!-- /container -->
<script src="build/bundle.js"></script>
</body>
</html>
bootstrap.js主要入口点
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import bootstrap from 'bootstrap'
$(document).ready(function () {
console.log('bootstrap loaded')
});
webpack.config.js
var path = require('path');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const webpack = require("webpack");
module.exports = {
entry: './src/bootstrap.js',
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js']
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery", …请参阅jsfiddle,例如,将First Name字段留空以显示验证工具提示.在正常形式中,验证工具提示正确地定位在每个元素的右侧.但是在网格的弹出编辑器中,它仍然试图将工具提示放在元素下面,就好像它在内联编辑一样.我试过<span class="k-invalid-msg" data-for="FirstName"></span>但它没有改变任何东西.是否有一个我缺少的设置让这个在popupeditor中工作？我想我可以手动修改.k-tooltip,但我希望有更多内置的东西正确处理定位,因为我不是很擅长CSS.
我已经通过jspm install foundation安装了基础,然后导入了基础和jquery.
我遇到的问题是,如果我通过import $ as 'jquery'我导入jquery 得到错误jquery_1.default不是一个函数.如果我通过import * as $ from jquery它导入jquery 按预期工作
我打电话 $(document).foundation();来初始化基础javascript组件.以下是我的主要内容
import 'foundation'
import $ from 'jquery';
import {Aurelia} from 'aurelia-framework';
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(a => a.setRoot())
.then(a => {
// Initialize framework
$(document).foundation();
});
}
其余代码只是默认导航到包含带有下拉列表的基础导航栏的简单页面
注意:即使将jquery列为dep,我也必须显式安装jquery.
我做了基础6的原始覆盖,显然做错了但它似乎在当时工作.但是,我已经发现当安装bootstrap时它将jquery放在github:components中,这似乎使得jquery不必显式安装.所以当时一切似乎都很好.
要重现只使用aurelia骨架并添加一个带有基础控件的页面,添加上面的$(document).foundation()
视窗 7 x64
使用打字稿 1.5 测试版使用 gulp-typescript 2.7.7 进行编译
获取错误：由于声明，类型“节点”上不存在属性“classList”
document.getElementsByClassName('left-aside-wrapper')[0].classList.toggle('isOpen');
我看到 classList 在 lib.d.ts 文件中定义为
interface Element extends Node, GlobalEventHandlers, ElementTraversal, NodeSelector, ChildNode {
classList: DOMTokenList;
不是很熟悉 d.ts 文件的工作原理，所以这是我的错误还是 d.ts 文件中需要报告的错误？
使用Extjs 4.2
我已经阅读了许多文档,谷歌,论坛试图了解组件如何加载以及放置它们的位置,如商店,模型等,但仍然困惑.
这是我试图开始工作的一个例子
应用说明
主菜单包含联系人,项目,人员等等,应用程序首先加载显示静态非数据驱动,然后使用点击联系人显示带有联系人列表的网格.然后,用户单击联系人行,并显示弹出编辑视图.
在contactitview中,联系人被加载到表单中,此外表单还有一个加载ContactTypes商店的组合框.ContactType应设置为该联系人记录的contacttype值.
这是一个常见的方法,考虑到这是一个大型应用程序,我只想在需要时加载数据,即显示视图.
以下是我的一些困惑
您可以在应用程序配置中定义所有控制器,商店,模型,视图,但无论您正在查看哪个页面,都会加载所有内容.此外,如果您的商店中有autoLoad:true,那么即使您没有查看该特定视图,也会对数据库进行所有商店的调用.
在控制器的stores或models属性中指定商店或模型时,具体到底是做什么的？它只是让你轻松引用商店而不是实际创建它或创建它,还是只是设置getter和setter函数以方便使用.例如,如果我在控制器的store属性中指定了一个商店,并且autoLoad为true,则加载所有数据而不需要执行任何其他操作.但我真正想要的是,只有当我点击"联系人"并且显示列表视图时才会加载该商店.所以我设置autoLoad:false并在我的列表函数中手动获取商店使用this.getStore('Contacts').这很好用,但是使用store和models控件的数组属性的目的是什么.我在调试器中看到,如果我不使用存储/模型属性,则会对这些js文件进行get请求.
对不起,我知道这很多,但对我来说很困惑,并且已经挣扎了一段时间.
最后,只有当您通过设置autoLoad:false并手动加载来单击"联系人"按钮时,才会加载"联系人"网格.现在,当用户单击编辑时,记录加载正常,但如何加载组合框然后选择正确的值.我认为我的部分问题是了解商店模型如何加载和实例化.在我的组合框存储属性中,我已将ContactType指定为存储,但我得到错误存储未定义,因此未加载js文件或未实例化存储.
到目前为止,这是我的代码.
应用代码
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux': "lib/extux",
'Wakanda': "lib/extux/wakanda"
}
});
Ext.application({
name: 'SimplyFundraising',
autoCreateViewport: true,
requires: ['Ext.ux.Router', // Require the UX
'Wakanda.model'
],
controllers: ['Contacts'],
});
联系控制器
Ext.define('SimplyFundraising.controller.Contacts', {
extend: 'Ext.app.Controller',
views: ['contacts.List', 'contacts.Edit'],
init: function() {
this.control({
'contactslist': {
itemdblclick: this.editContact,
removeitem: this.removeContact
},
'contactslist > toolbar > button[action=create]': {
click: this.onCreateContact
},
// 'contactsadd button[action=save]': {
// click: this.doCreateContact
// …在打字时,读取文档之后的新的tsd管理器用于打字稿定义我对于不同来源的意思以及如何通过指定源和版本来安装感到困惑
例如,如果您搜索基础网站
typings search foundation-sites
结果是
Run Code Online (Sandbox Code Playgroud)foundation-sites global 2016-02-11T00:39:58.000Z 1 foundation-sites dt 2016-03-17T12:06:54.000Z 1 http://foundation.zurb.com/
此命令typings install foundation-sites --save失败.
然后我添加了环境标志并且它有效,但是根据我的研究,全局和dt都被认为是环境因素,尽管我仍然不完全理解环境在环境中的环境意味着什么,以及全局环境.请参阅更详细的页面描述源.此页面列出了我们已经了解的dt中的3个环境
用于共享环境功能的lib(环境)
env用于编程环境类型(环境)
全球图书馆(环境)
上述差异意味着什么？
如果你有多个来源,如上面的搜索结果,只使用-ambient没有指定来源
1)哪一个安装,为什么？来自全球的日期或之后的日期.
是否可以提供正确的安装命令来选择源和版本.请包括非环境回购的示例,例如github和环境回购,例如global和dt
2)全局和dt源都需要--ambient标志吗？
3)只有在打字机注册表中的npm文件夹中,才会自动安装打字机.
例如,我可以使用typings install moment它安装,它的工作原理.从我可以告诉它的工作原理,因为它列在typings注册表中的npm文件夹中.
按照Corey的建议运行命令 typings install dt!foundation-sites
导致错误bash:!foundation-sites:找不到事件
修复:感谢Corey - 对于bash用户,使用\例句进行转义
typings install dt\!foundation-sites
我遇到的问题是loadjs文件在将其绑定到网格之前并不总是被加载.我已阅读有关使用指令的其他帖子,但我不明白如何在我的情况下使用它们.
代码应该加载一个特定的视图,每个视图依次有一个特定的javascript文件,需要在视图最终被renered之前加载
因此,视图1可能是具有datagrid.js文件依赖性的数据网格,而view2是具有listview.js依赖性的列表视图
谢谢.
Function MyCtrl1($scope) {
$scope.$on('$viewContentLoaded', function() {
//Load file if not already loaded
isloadjscssfile("js/model/gridmodel.js", "js")
$("#grid").kendoGrid({
dataSource: getdatasource(),
pageable: true,
height: 400,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "150px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "150px" },
{ field: "Discontinued", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "210px" }],
editable: "inline"
});
});
}
我对移动开发非常陌生,所以请不要因为新手问题而烦我.
我想我有正确的元标记.
<meta name="viewport" content="width=device-width, initial-scale=1">
从苹果网站上说它使用下面的标签允许在全屏模式下运行,但它似乎不起作用.
<!-- Allow web app to be run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable"
content="yes">
在IOS 8上为Iphone 4S设置宽度和高度
width: 320px;
height: 480px
我可以发布完整的代码,如果它将有助于它是非常简单的1页面布局标题与两个按钮,内容只是文本,以及带有导航图标的页脚
我看到的问题是它不是全屏,因此底部的IOS导航栏切断了我的页脚,它有一个图标菜单
Bluebird 3.4.1 for promises,Chrome 56,Babel 6.23.1
鉴于:
async login() {
try {
let response = await this.authservice.login('invalid-credentials');
} catch (error) {
}
}
上面的代码模拟了一个带有json对象的401响应错误,该对象具有从服务器返回的特定错误消息,该消息确实触发了catch语句.但是,我不想为每个catch语句处理错误,而是希望有一个全局错误处理程序.
在非异步函数中,我使用window.onerror按预期工作的事件.但是,这不适用于异步功能.
我还添加了活动
window.addEventListener('unhandledrejection')
window.addEventListener('rejectionhandled')
这些事件不会触发上述情况(它们会触发其他情况).相反,bluebird返回"警告承诺被拒绝且非错误:[对象响应]".
的this.authservice.login是使用使用标准的承诺与语法的异步函数库.
如果我在catch语句中抛出一个新错误,我可以得到错误最终冒泡到unhandledrejection事件.但是,上面的函数是从另一个函数调用的,我必须在两个函数中抛出一个错误,以便触发全局未处理的反射.
总之,我试图为所有async/awaits和promises创建一个全局错误处理程序.
当我选择一个文件夹时，我确实得到了 dirHandle 但无法弄清楚什么属性或方法将为我提供完整路径
const dirHandle = await window.showDirectoryPicker()
所以类似 let path = dirHandle.fullpath
有任何想法吗？